如何动态地将* ngIf添加到使用属性指令修饰的元素?
对于一个简单的实验,我试过这个:
@Directive({
selector: '[lhUserHasRights]'
})
export class UserHasRightsDirective implements OnInit, OnDestroy {
constructor(private el: ElementRef) {
}
ngOnInit(): void {
this.el.nativeElement.setAttribute("*ngIf", "false");
}
...
,但它没有奏效。浏览器向我显示错误" ERROR DOMException:无法执行' setAttribute' on'元素' :' ngIf'不是有效的属性名称。"
答案 0 :(得分:6)
以下建议基于Angular文档中的Structural Directives示例。
@Directive({
selector: '[lhUserHasRights]'
})
export class UserHasRightsDirective implements OnInit, OnDestroy {
private hasRights = false;
private hasView = false;
constructor(private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef) {
}
ngOnInit(): void {
if (this.hasRights && !this.hasView) {
this.viewContainer.createEmbeddedView(this.templateRef);
this.hasView = true;
} else if (!this.hasRights && this.hasView) {
this.viewContainer.clear();
this.hasView = false;
}
}
...
现在这是你可能需要连接的其他一些管道,具体取决于你必须如何使用你的指令。例如,你想像这样使用它吗
<div *lhUserHasRights>...</div>
或
<div *lhUserHasRights="condition">...</div>
我建议您阅读上面链接中的文档部分。