Question

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

对于一个简单的实验，我试过这个：

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

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

    ...

，但它没有奏效。浏览器向我显示错误＆＃34; ERROR DOMException：无法执行＆＃39; setAttribute＆＃39; on＆＃39;元素＆＃39; ：＆＃39; ngIf＆＃39;不是有效的属性名称。＆＃34;

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>

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

在指令中动态添加* ngIf

1 个答案: