angular实现指令

指令在angular是一个比较重要的概念,angular给我们也提供了一些常用的指令,比如(click),*ngFor,*ngIf等!实际的应用过程中,只用这些是远远不够的,开发者就需要自己实现自己需要的指令.

创建一个指令

该指令实现的功能是:当在组件或者html元素使用该指令时,点击该组件或者元素的时候就会打印一些字符串

import { Directive, HostListener } from '@angular/core';
@Directive({
  selector: '[appClickBtn]',
})
export class ClickBtnDirective {
  constructor() {}
  @HostListener('click', ['target'])
  handleClick() {
    console.log(11111);
  }
}

自定义指令的使用

在所属模块中的declarations引入就可以了

<button type="submit" (click)="add()" appClickBtn>
  Save
</button>