如何在 Angular 中创建自定义指令

Question

我一直在用 Angular 编写一个应用程序，并且我已经很好地掌握了大多数东西。 我不明白的一件事是结构指令或任何使用代码的东西都会改变 DOM

对于我想要学习的最简单的例子，如果我有的话，在父模板中

<div [addTitle]='sometitle'>
   <child-component></child-component>
</div>

我想构建一个指令，当我添加一个具有 [addTitle]='sometitle' 属性的 div 时，它会将最终代码更改为此

<div [addTitle]='sometitle'>
   <h2>sometitle</h2>
   <child-component></child-component>
</div>

同时保持<child-component></child-component> 的内容不变，并且所有绑定都保持不变等。

我知道我需要一个文件，例如

import { Directive, Input } from '@angular/core';

@Directive({
  selector: '[addTitle]'
})
export class addTitleDirective {
  constructor() { }
}

我只是不知道如何访问带有指令的标签的内部“html”或防止子组件被破坏或如何将<h2>sometitle</h2> 添加到 DOM 或显示 html在<child-component> 里面返回DOM

如果这是一般情况，我很抱歉，但我正在寻找一些指导来帮助我开始。

编辑 inorganik 好心地指出了一个组件更适合并给出了示例..谢谢。

我想知道我有没有

<div [addTitles]="['sometitle1', 'sometitle2']">
   <child-component1></child-component1>
   <child-component2></child-component2>
</div>

并想以

告终

<div [addTitle]="['sometitle1', 'sometitle2']">

   <h2>sometitle1</h2>
   <child-component1></child-component1>

   <h2>sometitle2</h2>
   <child-component2></child-component2>

</div>

组件还能工作吗？

Answer 1

我相信您正在寻找ng-content。另外我认为组件比指令更好地服务您的示例 - 所以您的组件可能如下所示：

@Component({
  selector: 'app-title',
  templateUrl: './title.component.html',
  styleUrls: ['./title.component.scss'],
})
export class TitleComponent {

  @Input() addTitle: string;

}

模板：

<h2>{{ addTitle }}</h2>
<ng-content></ng-content>

然后你这样使用它：

<app-title [addTitle]="'my title'">
  <child-component></childcomponent>
</app-title>