学习angular指令 属性型指令 精简官方文档 用大白话解释

是什么？

指令是为 Angular 应用程序中的元素添加额外行为的类

指令是 没有模板的组件

 有一些内置的：

属性型

NgClass	添加和删除一组 CSS 类。
NgStyle	添加和删除一组 HTML 样式。
NgModel	将双向数据绑定添加到 HTML 表单元素。

结构型

NgIf	有条件地从模板创建或销毁子视图。
NgFor	为列表中的每个条目重复渲染一个节点。
NgSwitch	一组在备用视图之间切换的指令。

属性型指令

是什么？

使用属性型指令，可以更改 DOM 元素和 Angular 组件的外观或行为。

怎么用？

建立：

1 要创建指令，请使用 CLI 命令  ng generate directive

// 生成后的：

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

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

2 从 @angular/core 导入 ElementRef。操作宿主元素

3 在指令的 constructor() 中添加 ElementRef 以注入对宿主 DOM 元素的引用

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(private el: ElementRef) {
       this.el.nativeElement.style.backgroundColor = 'yellow';
    }
}

怎么用？

<p appHighlight>Highlight me!</p>

用户事件？

从 '@angular/core' 导入 HostListener

添加两个事件处理程序

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

  constructor(private el: ElementRef) { }

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

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

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

}

 

 

传递值

在 highlight.directive.ts 中，从 @angular/core 导入 Input

添加一个 appHighlight 的 @Input() 属性。

@Input() 装饰器会将 宿主的  元数据添加到此类

在宿主那边创建 变量

<p [appHighlight]="color">Highlight me!</p>

通过用户输入来设置值

就是值从外部获取 仅此

本文参考了官网