Angular 6-指令

在Angular中，指令是一个带有指令元数据的类，用于扩展HTML标签的行为和外观。Angular 6中，指令分为三类：组件、结构指令和属性指令。

组件指令

组件指令是一种特殊的指令，用于创建可复用的UI组件。组件是以一个带有模板、样式文件和类的组合的形式存在的。下面是一个简单的“hello world”组件：

import { Component } from '@angular/core';

@Component({
  selector: 'hello-world',
  template: '<p>Hello World!</p>',
  styles: ['p { font-weight: bold; }']
})
export class HelloWorldComponent {}

在模板中使用这个组件：

<hello-world></hello-world>

结构指令

结构指令是用来添加和移除DOM元素的指令。Angular 6中有两种结构指令：ngIf和ngFor。

ngIf用于条件性地显示DOM元素：

<div *ngIf="isActive">Active content</div>

ngFor用于循环DOM元素：

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

属性指令

属性指令是用于修改元素属性和行为的指令。在Angular 6中，使用@Directive装饰器来创建属性指令。

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

@Directive({
  selector: '[myHighlight]'
})
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;
  }
}

使用这个属性指令来添加高亮效果：

<p myHighlight>Highlight me</p>

以上就是Angular 6指令的详细介绍。使用指令可以让我们更加灵活的控制DOM元素的行为和外观。