从任何活动组件中隐藏组件？

Question

有一个组件 <app-tabs-components>。

它从服务获取数据。此服务中有变量 show: boolean 到页面上的 show/hide 组件。

@Injectable({ providedIn: "root" })
export class TabService {
    show = false;
    showHide(status: boolean) { 
        this.show = status;
    }

     get() {
          return this.show;
     }
}

问题是我需要在每个要隐藏组件 <app-tabs-components> 的组件中调用 tabService.showHide(false)。

组件 <app-tabs-components> 如果它失去焦点，而不是活动区域，则始终应关闭。

就我而言，我违反了 DRY 原则。

例如，当用户激活任何我必须做的组件时：

ngOnInit() {
  tabService.showHide(false)
}

所以这部分代码在我想隐藏 tabsComponent 的每个组件中重复出现

Answer 1

创建一个基础 Class 并在此 class 的构造函数中调用您的服务。

export class BaseComp  {

  public IsHide: boolean;
  constructor() {
    this.IsHide = tabService.showHide(false);
  }

}

在不同的组件中继承这个BaseComp。

export class YourComponent extends BaseComp implements OnInit  {

constructor() {
  super(); // calls the base constructor 
  console.log(this.IsHide); // this IsHide is of Base class
}

ngOnInit() {

}

}

希望对您有所帮助！！

从任何活动组件中隐藏组件？

Hide component from any active component?

angular

angular6

angular8