在指令中动态添加*ngIf

Question

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

对于一个简单的实验,我试过这个:

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

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

    ...

,但它没有用.浏览器向我显示错误" 错误DOMException:无法在'Element'上执行'setAttribute':' ngIf'不是有效的属性名称. "

Answer 1

以下建议基于Angular文档中的结构指令示例.

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

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