大佬教程收集整理的这篇文章主要介绍了Angular 2.x学习教程之结构指令详解,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
结构指令通过添加和删除 DOM 元素来更改 DOM 布局。Angular 中两个常见的结构指令是 *ngIf
和 *ngFor
。
* 号是语法糖,用于避免使用复杂的语法。我们以 *ngIf 指令为例:
首先,让我们了解如何创建一个结构指令。 接下来我们将要实现一个简单的 ngIf 指令。
@Directive({ SELEctor: '[myNgIf]'})
export class MyNgIfDirective {
constructor(
private templateRef: TemplateRef
@Input() set myNgIf(condition: Boolean) {
if (condition) {
this.viewContainer.createEmbeddedView(this.templateRef);
} else {
this.viewContainer.clear();
}
}
}
我们可以按照以下方式使用我们的指令:
下面我们来解释一下上面的代码。
如名字所示,TemplateRef 用于表示模板的引用。
正如上面介绍的,模板中包含了 DOM 元素,但如果要显示模板中定义的元素,我们就需要定义一个插入模板中元素的地方。在 Angular 中,这个地方被称作容器,而 ViewContainerRef 用于表示容器的引用。那什么元素会作为容器呢?
Angular 将使用 comment 元素替换 template 元素,作为视图容器。
我们来看一个具体的示例:
以上代码成功运行后,浏览器的显示内容如下:
ViewContainerRef 对象提供了 createEmbeddedView()
方法,该方法接收 TemplateRef 对象作为参数,并将模板中的内容作为容器 (comment 元素) 的兄弟元素,插入到页面中。
现在,你已经了解如何创建结构指令,接下来让我们看看两个具体的实例。
constructor(
private templateRef : TemplateRef
ngOnInit() {
thiS.User$ = this.authservice.user
.do(() => this.viewContainer.clear())
.filter(user => user.role === this.roleName)
.subscribe(() => {
this.viewContainer.createEmbeddedView(this.templateRef);
});
}
<div *ifRole="'client'">
Only for Client
<div *ifRole="'editor'">
Only for Editor
@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 名称,因为我们不知道用户在使用这个指令时,会使用什么名字。
以上代码成功运行后,浏览器的显示内容如下:
以上就是这篇文章的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对菜鸟教程的支持。
以上是大佬教程为你收集整理的Angular 2.x学习教程之结构指令详解全部内容,希望文章能够帮你解决Angular 2.x学习教程之结构指令详解所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。