在指令中动态添加* ngIf

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

对于一个简单的实验，我尝试这样做：

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

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

    ...

，但没有奏效。浏览器给我一个错误“错误抛出：DOMException：未能执行的‘元素’‘的setAttribute’：‘ngIf’是不是有效的属性名称。”

来源

2017-07-30 Steven

而不是添加* ngIf，如何通过指令更改CSS显示或可见性属性？ – Vega

与vega一致，不可能向Dom动态添加结构指令。它必须被直接添加。利用'[hidden]' –

@RahulSingh由于问题明确指出试图作为'* ngIf'，我不确定使用'[hidden]'是否正确。隐藏该元素只会将其从呈现的页面中移除，而不会将其从浏览器的“查看页面源”工具中看到。如果元素包含敏感信息，这将不合适。 –

以下建议是基于从Structural Directives例子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>

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

来源

2017-07-30 19:00:51

谢谢，正是我需要的！ – Steven

在指令中动态添加* ngIf

回答

相关问题