一、指令-属性指令
概述
在 Angular 中有三种类型的指令:
- 组件 — 拥有模板的指令
- 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令
- 属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。
结构型指令修改视图的结构。例如,NgFor 和 NgIf。 要了解更多,参见结构型指令 guide。
属性型指令改变一个元素的外观或行为。例如,内置的 NgStyle 指令可以同时修改元素的多个样式。
自定义指令 属性型指令至少需要一个带有@Directive装饰器的控制器类。该装饰器指定了一个用于标识属性的选择器。 控制器类实现了指令需要的指令行为。
import { Directive, ElementRef, Input } from '@angular/core'; @Directive({ selector: '[myStyle]' }) export class StyleDirective { constructor(el: ElementRef) { el.nativeElement.style.backgroundColor = 'yellow'; } }
import语句指定了从 Angular 的core库导入的一些符号。
- Directive提供@Directive装饰器功能。
- ElementRef注入到指令构造函数中。这样代码就可以访问 DOM 元素了。
- Input将数据从绑定表达式传达到指令中。
导入指令
//app.module.ts import {StyleDirective} from './directives/attribute-directives/style.directive' @NgModule({
declarations: [ ... // 属性指令 StyleDirective ], ```
使用指令
```
<!--myStyle为自定义属性指令-->
<h1 myStyle>
Welcome to {{title}}!{{mytext}}
</h1>
```
自定义带事件的属性指令-带输入参数 可以通过标准的JavaScript方式手动给宿主 DOM 元素附加一个事件监听器。 但这种方法至少有三个问题:
- 必须正确的书写事件监听器。
- 当指令被销毁的时候,必须拆卸事件监听器,否则会导致内存泄露。
- 必须直接和 DOM API 打交道,应该避免这样做。
import { Directive, ElementRef,HostListener, Input } from '@angular/core'; @Directive({ selector: '[myEventStyle]' }) export class EventStyleDirective { @Input('myEventStyle') styleColor: string; constructor(private el: ElementRef) { } @HostListener('mouseenter') onMouseEnter() { this.highlight(this.styleColor||'red'); } @HostListener('mouseleave') onMouseLeave() { this.highlight(null); } private highlight(color: string) { this.el.nativeElement.style.backgroundColor = color; } }
调用
<h2 myEventStyle> //或者 <h2 myEventStyle="green">
自定义带事件的属性指令-带默认参数
import { Directive, ElementRef,HostListener, Input } from '@angular/core'; @Directive({ selector: '[myEventStyle]' }) export class EventStyleDirective { @Input('myEventStyle') styleColor: string; //增加了这个 @Input() defaultColor: string; constructor(private el: ElementRef) { } //用在这里 @HostListener('mouseenter') onMouseEnter() { this.highlight(this.styleColor||this.defaultColor||'red'); } @HostListener('mouseleave') onMouseLeave() { this.highlight(null); } private highlight(color: string) { this.el.nativeElement.style.backgroundColor = color; } }
调用指令
<h2 myEventStyle defaultColor="#0000ff">
二、 结构指令
概述 结构型指令的职责是HTML布局。 它们塑造或重塑DOM的结构,比如添加、移除或维护这些元素。
像其它指令一样,你可以把结构型指令应用到一个宿主元素上。 然后它就可以对宿主元素及其子元素做点什么。
结构型指令非常容易识别。 在这个例子中,星号(*)被放在指令的属性名之前。
2.
Angular的是一个分组元素,但它不会污染样式或元素布局,因为 Angular 压根不会把它放进 DOM 中。
<div>
Pick your favorite hero
(<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
</div>
<select [(ngModel)]="hero">
<ng-container *ngFor="let h of heroes">
<ng-container *ngIf="showSad || h.emotion !== 'sad'">
<option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
</ng-container>
</ng-container>
</select>