Angular 7 指令

在 Angular 7 中，指令是一种用于修改或增强现有 HTML 元素的特殊属性。指令可用于向元素添加行为，或将元素转换为其他元素。

内置指令

Angular 7 提供了多个内置指令，可以在应用程序中直接使用。

ngIf

ngIf 指令用于根据条件从 DOM 中添加或删除元素，以下是一个示例：

<div *ngIf="showElement">
  This element will only be displayed if showElement is truthy.
</div>

ngFor

ngFor 指令用于迭代一个集合，并为每个项目创建副本以呈现在 DOM 上，以下是一个示例：

<ul>
  <li *ngFor="let item of items">
    {{ item }}
  </li>
</ul>

ngSwitch

ngSwitch 指令用于根据条件呈现不同的模板，以下是一个示例：

<div [ngSwitch]="condition">
  <div *ngSwitchCase="1">First case</div>
  <div *ngSwitchCase="2">Second case</div>
  <div *ngSwitchDefault>Default case</div>
</div>

自定义指令

Angular 7 还允许您定义自己的指令，以便将自定义行为添加到元素中。定义自己的指令通常涉及以下步骤：

1. 使用 @Directive 装饰器定义一个指令类。
2. 在指令类中添加适当的属性和方法。
3. 将指令类导出并引入到应用程序中。

以下是一个示例：

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef) { }

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }

}

在上面的代码中，HighlightDirective 是自定义指令类，@Directive 装饰器告诉 Angular，该类是一种指令。指令通过 selector 属性定义，该属性表示指令应该附加到哪些 DOM 元素上。在这种情况下，它使用了 appHighlight。

该指令还包含了两个监听器，分别用于在鼠标进入和离开元素时调用 highlight 方法。

在应用程序中，可以像下面这样使用该指令：

<p appHighlight>
  This paragraph will be highlighted when the mouse hovers over it.
</p>

需要注意的是，要使用自定义指令，需要将其导入到希望使用它的组件中，如：

import { HighlightDirective } from './highlight.directive';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {

  constructor() { }

}

总结

Angular 7 中的指令是一个强大而灵活的功能，允许开发人员通过添加自定义行为来扩展现有 HTML 元素。在本文中，我们学习了内置指令和自定义指令的基础知识。希望这些信息能够帮助您更好地利用 Angular 7 中的指令功能。