>
进口{指令、输入、TemplateRef ViewContainerRef} ' @angular/核心”;
@Directive({选择器:“[myNgIf]”})
出口类MyNgIfDirective {
构造函数(
私人templateRef: TemplateRef
私人viewContainer: ViewContainerRef) {}
@Input()设置myNgIf(条件:布尔){
如果(条件){
this.viewContainer.createEmbeddedView (this.templateRef);
其他}{
this.viewContainer.clear ();
}
}
}
& lt; div * myNgIf="条件"祝辞& lt;/div>
@ component ({
选择器:“我的程序”,
模板:
& lt; div>
& lt; h3 * myNgIf="条件"祝辞你好{{名称}}& lt;/h3>
& lt;按钮(点击)=疤跫?!条件”祝辞Click
& lt;/div>
”,
})
{出口类应用
名称:字符串;
条件:布尔=false;
构造函数(){
this.name=' Angular2 '
}
}
@Directive({选择器:“[ifRole]”})
出口类IfRoleDirective {
用户:美元的订阅;
@Input (ifRole) roleName:字符串;
构造函数(
私人templateRef: TemplateRef
私人viewContainer: ViewContainerRef,
私人authService: authService) {}
ngOnInit () {
这一点。用户=this.authService.user美元
,(()=比;this.viewContainer.clear ())
.filter(用户=比;用户。===this.roleName)作用
.subscribe(()=比;{
this.viewContainer.createEmbeddedView (this.templateRef);
}）;
}
ngOnDestroy () {
this.user .unsubscribe美元();
}
}
& lt; div * ifRole=癮dmin”比;
比;
比;>
进口{指令、输入、ViewContainerRef TemplateRef} ' @angular/核心”;
@Directive ({
选择器:“(范围)”
})
出口类RangeDirective {
_range:[]号;
@Input ()
设置范围(价值:数字){
this.vcr.clear ();
这一点。_range=enerateRange价值(价值[0],[1]);
this._range。forEach (num=比;{
this.vcr.createEmbeddedView(这一点。被称为tpl, {
隐式:美元num
}）;
}）;
}
构造函数(
私人录像机:ViewContainerRef,
私人tpl: TemplateRef
<强大?
结构指令通过添加和删除DOM元素来更改DOM布局.Angular中两个常见的结构指令是<代码> * ngIf 和<代码> * ngFor>
*号是语法糖,用于避免使用复杂的语法。我们以* ngIf指令为例:
(图片https://netbasal.com/)
-
<李>角把主机(宿主元素)包装在模板标签里面李
<李>角将ngIf转换为属性绑定——[ngIf]
李
首先,让我们了解如何创建一个结构指令。接下来我们将要实现一个简单的ngIf指令。
我们可以按照以下方式使用我们的指令:
下面我们来解释一下上面的代码。
<强> TemplateRef
如名字所示,TemplateRef用于表示模板的引用。
(图片https://netbasal.com/)
<强> ViewContainerRef
正如上面介绍的,模板中包含了DOM元素,但如果要显示模板中定义的元素,我们就需要定义一个插入模板中元素的地方。在角中,这个地方被称作容器,而ViewContainerRef用于表示容器的引用。那什么元素会作为容器呢?
角将使用评论元素替换模板元素,作为视图容器。
我们来看一个具体的示例:
以上代码成功运行后,浏览器的显示内容如下:
(图片https://netbasal.com/)
ViewContainerRef对象提供了<代码> createEmbeddedView() 方法,该方法接收TemplateRef对象作为参数,并将模板中的内容作为容器(评论元素)的兄弟元素,插入到页面中。
现在,你已经了解如何创建结构指令,接下来让我们看看两个具体的实例。
<强>指令定义
<强>指令应用
