angular - 在指令中动态添加 *ngIf

如何将 *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。”

最佳答案

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

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

关于angular - 在指令中动态添加 *ngIf，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45403221/