在指令中动态添加 *ngIf答案

【问题标题】：Dynamically add *ngIf in a directive在指令中动态添加 *ngIf
【发布时间】：2018-01-06 06:40:35
【问题描述】：

如何将 *ngIf 动态添加到使用属性指令修饰的元素？

为了一个简单的实验，我尝试了这个：

@Directive({
    selector: '[lhUserHasRights]'
})
export class UserHasRightsDirective implements OnInit, OnDestroy {
    constructor(private el: ElementRef) {
    }

    ngOnInit(): void {
        this.el.nativeElement.setAttribute("*ngIf", "false");
    }

    ...

，但它没有工作。浏览器向我显示错误“ERROR DOMException: Failed to execute 'setAttribute' on 'Element': 'ngIf' is not a valid attribute name.”

【问题讨论】：

不添加*ngIf，如何通过指令更改css显示或可见性属性？
同意 vega 不可能动态地向 Dom 添加结构指令。它必须直接添加。利用[hidden]
@RahulSingh 由于问题明确指出尝试使用*ngIf，我不确定使用[hidden] 是正确的方法。隐藏元素只会将其从呈现的页面中删除，但不会从 DOM 中删除，这将允许它在浏览器的“查看页面源代码”工具中看到。如果元素包含敏感信息，这将是不合适的。
通过 css 隐藏它绝对是另一回事。例如，如果你想重置一个组件实例并重新触发ngOnInit，当然它不会因为它被隐藏而停止它的逻辑，比如监听事件、更改检测等。

标签： angular angular-directive

【解决方案1】：

以下建议基于 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>

我建议阅读上面链接中的文档部分。

【讨论】：

谢谢，正是我需要的！