Angular7-指令

Angular是一个流行的前端框架，它提供了许多有用的特性和工具来帮助开发者以更高效的方式创建可伸缩的应用程序。其中Angular指令是一项重要特性，它可以帮助我们在页面上创建可复用的组件。

概述

Angular指令是一个带有注解的typescript类，用于在模板中声明可复用的组件。指令可以通过属性、元素标签或类名在模板中使用，并且可以根据需要向指令传递数据。

常用指令

@Directive

这是定义Angular指令的装饰器。使用@Directive装饰器，您可以定义一个指令，并确定如何在模板中使用它。例如：

@Directive({
  selector: '[myDirective]',
  host: {
    '(click)': 'onClick()'
  }
})
export class MyDirective {
  onClick() {
    console.log('Clicked!');
  }
}

此指令执行一个点击事件，并输出“Clicked!”。

@Input

使用@Input装饰器，您可以定义指令输入属性。这些输入属性可以在模板中使用，并且可以使用数据绑定将值传递给它们。例如：

@Directive({
  selector: '[highlight]'
})
export class HighlightDirective {
  @Input() highlightColor: string;
}

此指令定义了一个名为highlightColor的输入属性，可以使用数据绑定设置其值。要在模板中使用它，请使用方括号括起来的名称，如下所示：

<div [highlight]="myColor">...</div>

@Output

使用@Output装饰器，您可以定义指令输出属性。这些输出属性可以在模板中使用，并且可以使用事件绑定将值传递回它们。例如：

@Directive({
  selector: '[myClick]'
})
export class MyClickDirective {
  @Output() clickEvent = new EventEmitter<string>();

  onClick() {
    this.clickEvent.emit('Clicked!');
  }
}

此指令定义了一个名为clickEvent的输出属性，并在点击事件发生时向其发出事件。要在模板中使用它，请使用括号括起来的名称，如下所示：

<button (myClick)="onClick()">Click me</button>

@HostListener

使用@HostListener装饰器，您可以在指令所绑定的元素上监听特定事件，并在事件发生时执行代码。例如：

@Directive({
  selector: '[myDirective]'
})
export class MyDirective {
  @HostListener('click')
  onClick() {
    console.log('Clicked!');
  }
}

此指令将在元素上监听点击事件，并在单击时输出“Clicked!”到控制台。

总结

Angular指令是创建可重用的组件的强大工具。通过@Directive、@Input、@Output和@HostListener装饰器，您可以定义指令并将它们添加到应用程序中。此外，Angular还提供了许多内置的指令，例如NgIf、NgFor和NgStyle，这些指令可以帮助您更轻松地编写可用的应用程序代码。