在指令中动态添加 *ngIf

Question

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

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

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

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

    ...

，但是没有用。浏览器向我显示错误“ERROR DOMException：无法在 'Element' 上执行 'setAttribute'：'ngIf' 不是有效的属性名称。 "

Answer 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>

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

在指令中动态添加 *ngIf

Dynamically add *ngIf in a directive

angular-directive

angular