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

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

结构指令是什么？

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

了解 * 号语法

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

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

Angular 把 host (宿主元素) 包装在 template 标签里面

Angular 将 ngIf 转换为属性绑定 - [ngIf]

创建结构指令

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

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();

}

}

}

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

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

TemplateRef

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

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

ViewContainerRef

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

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

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

@Component({

selector:http:// 'my-app',

template: `

Click

`,

})

export class App {

name: string;

condition: boolean = false;

constructor() {

this.name = 'Angular2'

}

}

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

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

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

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

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

指令定义

@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();

}

}

指令应用

Only for Admin

Only for Client

Only for Editor

创建 Range 指令

指令定义

import { Directive, Input, ViewContainerRef, TemplateRef } from '@angular/core';

@Directive({

selector: '[range]'

})

export class RangeDirective {

_range: number[];

@Input()

set range(value: number) {

this.vcr.clear();

this._range = this.generateRange(value[0], value[1]);

this._range.forEach(num => {

this.vcr.createEmbeddedView(this.tpl, {

$implicit: num

});

});

}

constructor(

private vcr: ViewContainerRef,

private tpl: TemplateRef) { }

private generateRange(from: number, to: number): number[] {

var numbers: number[] = [];

for (let i = from; i <= to; i++) {

numbers.push(i);

}

return numbers;

}

}

以上示例中，我们在调用 createEmbeddedView() 方法时，设置了第二个参数 {$implicit: num}  。Angular 为我们提供了 let 模板语法，允许在生成上下文时定义和传递上下文。

这将允许我们引用 *range="[20,30]; let num" 模板中声明的变量。我们使用 $implicit 名称，因为我们不知道用户在使用这个指令时，会使用什么名字。

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

指令应用

{{num}}

{{num}}

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

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

总结

以上就是这篇文章的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。