angular6组件-内部布线

时间:2018-10-26 13:47:52

标签: angular

我有一个组件(角度6),onInit检索上下文并在其中进行操作。如果contextService返回423,则上下文被锁定,并且警报必须隐藏所有模板内容。

one.component.ts

@Component({
  selector: 'app-component-one',
  templateUrl: './one.component.html',
  ...
})
export class ComponentOne implements OnInit {
  public showAlertForLockedContext: boolean = false;
  ...
   ngOnInit() {
     this.contextService.getContext()
                        .subscription(this._onLoadedContext, this._onErrorContextLoading)
   } 
  ...

  private _onLoadedContext = (context: Context) => {
      console.log('OK, context loading successful');
      this.showAlertForLockedContext = false;
      //do something
  }

  private _onErrorContextLoading = (err) => {
      if(err.status == 423){
         console.log('KO, context is locked');
         this.showAlertForLockedContext = true;
      }
      else
        console.log('Generic error');
  }

}

one.component.html

<div>
   <div *ngIf="showAlertForLockedContext">Error, context is locked!</div>
   <div *ngIf="!showAlertForLockedContext">
      ... other stuff...
   </div>
</div>

我使用showAlertForLockedContext标志来切换显示/隐藏模板常规内容的警报。 现在,我必须将此业务逻辑应用于其他3个组件。 我不想重复:

    所有这些模板中的
  • *ngIf="!showAlertForLockedContext"
  • 上下文检索逻辑

有干净的方法吗?

我不想应用激活保护,因为我仍然想激活通向componentOne的路由。

我正在考虑采用某种内部路由在警报内容和常规内容之间切换,但是我不想更新URL和位置历史记录。

0 个答案:

没有答案