Angular 2.x学习教程之结构指令详解

结构指令是

什么

？

结构指令通过添加和删除 DOM 元素来更改 DOM 布局。Angular 中两个常见的结构指令是 *ngIf 和 *ngFor 。

了解 * 号语法

* 号是语法糖，用于避免使用复杂的语法。我们以 *ngIf 指令为例：

(图片来源：https://netbasal.com/)

• Angular 把 host (宿主元素) 包装在 template 标签里面
• Angular 将 ngIf 转换为属性绑定 - [ngIf]

创建结构指令

首先，让我们了解如何创建一个结构指令。 接下来我们将要实现一个简单的 ngIf 指令。

rush:js;"> import { Directive,Input,TemplateRef,ViewContainerRef } from '@angular/core';

@Directive({ selector: '[myNgIf]'})
export class MyNgIfDirective {

constructor(
private templateRef: TemplateRef,private viewContainer: ViewContainerRef) { }

@input() set myNgIf(condition: boolean) {
if (condition) {
this.viewContainer.createEmbeddedView(this.templateRef);
} else {
this.viewContainer.clear();
}
}
}

我们可以按照以下方式使用我们的指令：

rush:xhtml;">

下面我们来解释一下上面的代码。

TemplateRef

如名字所示，TemplateRef 用于表示模板的引用。

(图片来源：https://netbasal.com/)

ViewContainerRef

正如上面介绍的，模板中包含了 DOM 元素，但如果要显示模板中定义的元素，我们就需要定义一个插入模板中元素的地方。在 Angular 中，这个地方被称作容器，而 ViewContainerRef 用于表示容器的引用。那什么元素会作为容器呢？

Angular 将使用 comment 元素替换 template 元素，作为视图容器。

我们来看一个具体的示例：

rush:js;"> @Component({ selector: 'my-app',template: `

`,}) export class App { name: string; condition: boolean = false; constructor() { this.name = 'Angular2' } }

以上代码成功运行后，浏览器的显示内容如下：

(图片来源：https://netbasal.com/)

ViewContainerRef 对象提供了 createEmbeddedView() 方法，该方法接收 TemplateRef 对象作为参数，并将模板中的内容作为容器 (comment 元素) 的兄弟元素，插入到页面中。

现在，你已经了解如何创建结构指令，接下来让我们看看两个具体的实例。

基于用户角色显示不同的内容

指令定义

rush:js;"> @Directive({selector: '[ifRole]'}) export class IfRoleDirective { user$ : Subscription; @Input("ifRole") roleName : string;

constructor(
private templateRef : TemplateRef,private viewContainer : ViewContainerRef,private authService : AuthService ) {}

ngOnInit() {
this.user$ = this.authService.user
.do(() => this.viewContainer.clear())
.filter(user => user.role === this.roleName)
.subscribe(() => {
this.viewContainer.createEmbeddedView(this.templateRef);
});
}

ngOnDestroy() {
this.user$.unsubscribe();
}
}

指令应用

rush:xhtml;">

<div *ifRole="'client'">
Only for Client

<div *ifRole="'editor'">
Only for Editor