angular - 如何操作 Angular 属性指令以响应应用程序行为

Question

最近我遇到了一种情况，比如我应该根据应用程序的状态显示和隐藏 DOM 元素。假设应用程序的状态是Admin view和employee view。我创建了一个下拉菜单来切换应用程序的视图。

<option (click)="enableAdminView()">Admin View <option/>
 <option (click)="enableEmployeeView()">Employee View <option/>

单击 dropdwon 后，我已向 RXjs 主题注册了一个事件，然后我的自定义指令可以订阅这些事件。根据我需要显示和隐藏 Dom 元素的事件。

客户指令.ts

  @Directive({
      selector: '[myApplicationView]'
    })
    export class ApplicationViewDirective {
       this.applicationView = 'Employee' ;
       constructor(private templateRef: TemplateRef<any>,
        private viewContainer: ViewContainerRef) {
              //Subscribe to ApplicationViewService
        ApplicationViewService.APPLICATION_VIEW_SUBJECT.subscribe((view) => {

          this.applicationView = view; // view can be Admin or Employee
          this.renderDomElements(view)
        });
        }

        @Input() set myApplicationView(view: string) {
          this.renderDomElements(view);
        }

    renderDomElements(view: any) {
      if(view === 'Employee'){
        this.viewContainer.createEmbeddedView(this.templateRef);
    } else if (view == Admin) {
     this.viewContainer.createEmbeddedView(this.templateRef);
    }else{
      this.viewContainer.clear();
    }

}
}

HTML 导航菜单代码片段

<div   *myApplicationView="'Admin'"> 
   ... // display admin related actions
  </div>

  <div   *myApplicationView="'Employee'"> 
   ... // display employee related actions
  </div>

这里的问题是在指令的订阅者函数中调用this.renderDomElements(view)函数时，我无法访问主机指令的 @input 值。我尝试调用this.templateRef.elementRef.nativeElement来获取主机指令值，但它已被注释，因此无法访问指令输入值。那么初始化后有什么方法可以访问指令的输入值？

标签： angularangular-directive