达州做网站
大橙子网站建设，新征程启航
为企业提供网站建设、域名注册、服务器等服务
Angular2.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: 'my-app',
template: `
Hello {{name}}
`,
})
export class App {
name: string;
condition: boolean = false;
constructor() {
this.name = 'Angular2'
}
}以上代码成功运行后，浏览器的显示内容如下：
(图片来源：https://netbasal.com/)
ViewContainerRef 对象提供了 createEmbeddedView() 方法，该方法接收 TemplateRef 对象作为参数，并将模板中的内容作为容器 (comment 元素) 的兄弟元素，插入到页面中。
现在，你已经了解如何创建结构指令，接下来让我们看看两个具体的实例。
基于用户角色显示不同的内容
指令定义
@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 AdminOnly for ClientOnly 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/)
指令应用
Your age:
Year:
以上代码成功运行后，浏览器的显示内容如下：
(图片来源：https://netbasal.com/)
总结
以上就是这篇文章的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对创新互联的支持。
新闻名称：Angular2.x学习教程之结构指令详解
URL链接：http://dzwzjz.com/article/pdeges.html