角结构指令重复组件

Question

我的角度应用程序有一个结构指令，可根据用户角色显示/隐藏组件。 在某些情况下（登录），具有伪指令的所有组件都将重复，直到页面刷新为止。所以我试图在创建它之前清除viewContainer，现在问题似乎已经解决了。 但这是正确的方法吗？以及为什么

这是html中的指令。

<button *securityUtils="loggedUserService.roles" 
  mat-icon-button routerLink="/subscription">

这是指令：

@Directive({
  selector: "[securityUtils]"
})
export class SecurityUtils implements OnInit, OnDestroy {


  private _securityUtils: Subscription;
  @Input()
  set securityUtils(value: Observable<string[]>) {
    this._securityUtils = value.subscribe(roles => this.isAuthorized(roles));
  }

  constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef, private security: SecurityService) {}

  ngOnInit() {}

  ngOnDestroy() {
    this._securityUtils.unsubscribe();
  }

  isAuthorized(roles: string[]) {
    if (roles != null) {
      if (this.security.isAuthorized(roles)) {
        this.viewContainer.clear();   ******<-- clear before create***
        this.viewContainer.createEmbeddedView(this.templateRef);
      } else {
        this.viewContainer.clear();
      }
    }
  }