Angular 7 指令

指令是 DOM 中的指令。它们指定如何在 Angular 中放置您的组件和业务逻辑。

指令是 js 类，声明为 @directive。 Angular 中有 3 种指令。

• 组件指令
• 结构指令
• 属性指令

组件指令： 组件指令在主类中使用。 它们包含组件应如何在运行时处理、实例化和使用的详细信息。

结构指令： 结构指令以 * 符号开头。 这些指令用于操作和更改 DOM 元素的结构。 例如，*ngIf 和 *ngFor。

属性指令： 属性指令用于更改 DOM 元素的外观和行为。 例如：ngClass、ngStyle 等。

属性指令和结构指令的区别

如何创建自定义指令？

您可以创建自己的自定义指令以在 Angular 组件中使用。

创建一个基本的属性指令

您已经看到了像 ngClass 和 ngStyle 这样的属性指令。 现在，是时候创建我们自己的属性指令了。

首先，创建一个文件夹。 我们将其命名为“simple-style”。 然后，在该文件夹中创建一个名为“simple-style.directive.ts”的文件

现在，您必须通知 Angular 您有一个新的指令。 因此，您必须将SimpleStyleDirective 添加到 app.module.ts 并导入它。

现在，您的指令已创建。 让我们检查一下。 打开 app.component.html 并使用您创建的 SimpleStyleDirective

<p appSimpleStyle>使用您创建的 SimpleStyleDirective 设置我的样式</p>