最终总结:
两种用法。(* 与 template) 控制宿主元素的模板。 在哪里去显示,viewcontain 怎么注入,属性的set语法的使用,是便捷的监听属性值变化的途径。
Angular 有一个强力的模板引擎,它能让你轻松维护元素的DOM树结构。
组件其实就是一个带模板的指令。是这三种指令中最常用的,我们会编写大量的组件来构建application。
属性型指令会修改元素的外观或者行为。 e.g. NgStyle可以修改元素的好几个样式。
结构型指令通过<u>添加和删除 DOM 元素来改变DOM的布局。</u>
我们经常看到的内置的结构型指令有:ngIf、ngSwitch、ngFor。
下面我们着重介绍ngIf。
该指令接受一个布尔值,并据此让<u>一整块DOM树出现或者消失。</u>
注意:这里是出现或者消失,并不是隐藏。
基于上面的利弊分析,无论是我们在使用内置的指令还是使用自定的指令的时候,我们应该自己分析提添加、移除元素以及创建和销毁组件的后果。
结构型指令,比如ngIf,使用HTML 5的template标签 完成它们的“魔法”。
控制Template标签内DOM添加与显示,在模板级别使用的。
我们可以通过把短语"Hip! Hip! Hooray!"中间的"hip"包在一个<template>标签中来验证下这个效果。
<p>
Hip!
</p>
<template>
<p>
Hip!
</p>
</template>
<p>
Hooray!
</p>
这时候显示的内容是'Hip! Hooray!',在Angular的控制下,DOM的效果是不同的。
template-in-out-of-a2.png
显然,Angular把<template>标签及其内容替换成了一个空白<script> 标签。 这只是它的默认行为。
我们自顶一个类似ngIf
的指令。
import { Directive, Input } from '@angular/core';
import { TemplateRef, ViewContainerRef } from '@angular/core';
/** 选中器[],是匹配页面上的指令,可以有多个名称,由于是自己的指令,所以没有使用ng开头 */
@Directive({ selector: '[myUnless]' })
export class UnlessDirective {
/**
* 我们需要访问模板,并且还需要一个渲染器来渲染它的内容。
* 我们通过TemplateRef来访问模板。渲染器是ViewContainerRef。
* 我们把它们都作为私有变量注入到构造函数中。
* viewContainer 往这里面去添加,指向的是Template,这是边界,这样界定。
*/
constructor(
private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef
) { }
/**
* 如果条件为假,我们就渲染模板,否则就清空元素内容。
* 我们现在先把myUnless属性定义成一个“只写”属性。
* 属性值发生了变化,可以展示出来。
*/
@Input() set myUnless(condition: boolean) {
if (!condition) {
this.viewContainer.createEmbeddedView(this.templateRef);
} else {
this.viewContainer.clear();
}
}
}
这个星号是一种“语法糖”。来简化这种事情。要么显示的包含在Template标签中,要么隐式的使用*这种语法糖去包装在Template标签中。它简化了ngIf和ngFor —— 无论是写还是读。
<!-- Examples (A) and (B) are the same -->
<!-- (A) *ngIf paragraph -->
<p *ngIf="condition">
Our heroes are true!
</p>
<!-- (B) [ngIf] with template -->
<template [ngIf]="condition">
<p>
Our heroes are true!
</p>
</template>
要知道,Angular会把风格(A)写成风格(B)。 它把段落及其内容移到了<template> 标签中。 它把指令移到了<template> 标签上,成为该标签的一个属性绑定 —— 包装在方括号中。 宿主组件的condition 属性的布尔值决定该模板的内容是否应该被显示。
Angular把*ngFor转换成一个类似的形式:
<!-- Examples (A) and (B) are the same -->
<!-- (A) *ngFor div -->
<div *ngFor="let hero of heroes">{{ hero }}</div>
<!-- (B) ngFor with template -->
<template ngFor let-hero [ngForOf]="heroes">
<div>{{ hero }}</div>
</template>
后续学习 H5的Template标准