是什么?
指令是为 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>
通过用户输入来设置值
就是值从外部获取 仅此
本文参考了官网