【angular】@Directive
在 Angular中有三种类型的指令directive：
组件@Component — 拥有模板的指令,我们在另外一文已专门学习过啦。本文就不涉及改指令的内容了。
结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令。例如，*NgFor 和 *NgIf。你可能注意到了指令名的星号*前缀，它是一个语法糖， 从内部实现来说，Angular把 *... 属性 翻译成一个
<div *ngIf="hero" class="name">{
{hero.name}}div>
<ng-template [ngIf]="hero">
<div class="name">{
{hero.name}}div>
ng-template>
<div *ngFor="let hero of heroes; let i=index;
let odd=odd; trackBy: trackById"
[class.odd]="odd">
({
{i}}) {
{hero.name}}
div>
<ng-template ngFor
let-hero [ngForOf]="heroes" let-i="index"
let-odd="odd" [ngForTrackBy]="trackById">
<div [class.odd]="odd">
({
{i}}) {
{hero.name}}
div>
ng-template>
属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。例如，内置的 NgStyle 指令可以同时修改元素的多个样式
A. 属性型指令
属性型指令至少需要一个带有
@Directive装饰器的控制器类。该装饰器指定了一个用于标识属性的选择器。 控制器类实现了指令需要的指令行为。本节展示了如何创建一个简单的属性型指令appHighlight，当用户把鼠标悬停在一个元素上时，改变它的背景色。你可以这样用它：
<p appHighlight>Highlight me!p>
指令名为啥不直接叫做
highlight？
① 尽管highlight是一个比appHighlight更简洁的名字，而且它确实也能工作。 但是最佳实践是在选择器名字前面添加前缀，以确保它们不会与标准HTML属性冲突。 它同时减少了与第三方指令名字发生冲突的危险。
② 确认你没有为highlight指令添加**ng**前缀。 那个前缀属于 Angular，使用它可能导致难以诊断的bug
import {
Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}
ElementRef：注入宿主DOM元素的引用，也就是你放置appHighlight的那个元素。它通过其nativeElement属性给你了直接访问宿主DOM元素的能力。
当前，appHighlight 只是简单的设置元素的颜色。 这个指令应该在用户鼠标悬浮一个元素时，设置它的颜色。
把 HostListener（这个我们在@Component一文中也略有提到）加进导入列表中
import {
Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(private el: ElementRef) {
}
@HostListener('mouseenter') onMouseEnter() {
this.highlight('yellow');
}
@HostListener('mouseleave') onMouseLeave() {
this.highlight(null);
}
private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
}
运行本应用并确认：当把鼠标移到 p 上的时候，背景色就出现了，而移开时就消失了
使用 @Input 数据绑定向指令传递值
import {
Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(private el: ElementRef) {
}
@Input('appHighlight') highlightColor: string;
@HostListener('mouseenter') onMouseEnter() {
this.highlight(this.highlightColor || 'red');
}
@HostListener('mouseleave') onMouseLeave() {
this.highlight(null);
}
private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
}
测试案例：
<h1>My First Attribute Directiveh1>
<h4>Pick a highlight colorh4>
<div>
<input type="radio" name="colors" (click)="color='lightgreen'">Green
<input type="radio" name="colors" (click)="color='yellow'">Yellow
<input type="radio" name="colors" (click)="color='cyan'">Cyan
div>
<p [appHighlight]="color">Highlight me!p>
B. 结构型指令
有时你会希望只有当特定的条件为真时才重复渲染一个
HTML块。 但Angular不允许。这是因为你在一个元素上只能放一个结构型指令。
结构型指令可能会对宿主元素及其子元素做很复杂的事。当两个指令放在同一个元素上时，谁先谁后？
NgIf优先还是NgFor优先？NgIf可以取消NgFor的效果吗？ 如果要这样做，Angular应该如何把这种能力泛化，以取消其它结构型指令的效果呢？
在文章开头我们已经介绍了*ngIf和*ngFor
再来具体解析下*ngFor
let关键字声明一个模板输入变量，你会在模板中引用它。本例子中，这个输入变量就是hero、i和odd。 解析器会把let hero、let i和let odd翻译成命名变量let-hero、let-i和let-odd。- 微语法解析器接收
of和trackby，把它们首字母大写（of->Of,trackBy->TrackBy）， 并且给它们加上指令的属性名（ngFor）前缀，最终生成的名字是ngForOf和ngForTrackBy。 这两个最终生成的名字是NgFor的输入属性，指令据此了解到列表是heroes，而 track-by 函数是trackById。 - API 参考手册中描述了
NgFor指令的其它属性和上下文属性。
NgSwitch了解下
Angular 的 NgSwitch实际上是一组相互合作的指令：NgSwitch、NgSwitchCase 和 NgSwitchDefault。
<div [ngSwitch]="hero?.emotion">
<app-happy-hero *ngSwitchCase="'happy'" [hero]="hero">
app-happy-hero>
<app-sad-hero *ngSwitchCase="'sad'" [hero]="hero">
app-sad-hero>
<app-confused-hero *ngSwitchCase="'confused'" [hero]="hero">
app-confused-hero>
<app-unknown-hero *ngSwitchDefault [hero]="hero">
app-unknown-hero>
div>
<div [ngSwitch]="hero?.emotion">
<ng-template [ngSwitchCase]="'happy'">
<app-happy-hero [hero]="hero">app-happy-hero>
ng-template>
<ng-template [ngSwitchCase]="'sad'">
<app-sad-hero [hero]="hero">app-sad-hero>
ng-template>
<ng-template [ngSwitchCase]="'confused'">
<app-confused-hero [hero]="hero">app-confused-hero>
ng-template >
<ng-template ngSwitchDefault>
<app-unknown-hero [hero]="hero">app-unknown-hero>
ng-template>
div>
C. ng-template & ng-container
Angular 元素，用来渲染 HTML。 它永远不会直接显示出来。 事实上，在渲染视图之前，Angular 会把
如果没有使用结构型指令，而仅仅把一些别的元素包装进
上述代码的效果：下拉列表就是空的 下拉框工作正常 在本节中，你会写一个名叫 把这个指令添加到 等本人学习了解后再来补充吧…React的Fragments
还有一个问题是：有些 HTML 元素需要所有的直属下级都具有特定的类型。 比如， 元素要求直属下级必须为 ，那就没办法把这些选项包装进 中。如：
<div>
Pick your favorite hero
(<label><input type="checkbox" checked
(change)="showSad = !showSad">show sadlabel>)
div>
<select [(ngModel)]="hero">
<span *ngFor="let h of heroes">
<span *ngIf="showSad || h.emotion !== 'sad'">
<option [ngValue]="h">{
{h.name}} ({
{h.emotion}})option>
span>
span>
select>
Angular 的 Angular 压根不会把它放进 DOM 中。Angular 解析器负责识别处理的语法元素。 它不是一个指令、组件、类或接口，更像是 JavaScript 中 if 块中的花括号<div>
Pick your favorite hero
(<label><input type="checkbox" checked
(change)="showSad = !showSad">show sadlabel>)
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>
自定义结构型指令
UnlessDirective 的结构型指令，它是 NgIf 的反义词import {
Directive, Input, TemplateRef, ViewContainerRef }
from '@angular/core';
/**
* Add the template content to the DOM unless the condition is true.
*/
@Directive({
selector: '[appUnless]'})
export class UnlessDirective {
private hasView = false;
constructor(
private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef) {
}
//没有人会读取 appUnless 属性，因此它不需要定义 getter
@Input() set appUnless(condition: boolean) {
if (!condition && !this.hasView) {
this.viewContainer.createEmbeddedView(this.templateRef);
this.hasView = true;
} else if (condition && this.hasView) {
this.viewContainer.clear();
this.hasView = false;
}
}
}
AppModule 的 declarations 数组中。然后创建一些 HTML 来试用一下。<p *appUnless="condition" class="unless a">
(A) This paragraph is displayed because the condition is false.
p>
<p *appUnless="!condition" class="unless b">
(B) Although the condition is true,
this paragraph is displayed because appUnless is set to false.
p>
Angular有哪些内置指令?