如何根据当前组件隐藏元素（在组件内）？ （我正在使用路由器）

Question

我基本上可以完全隐藏组件，但是我不知道如何隐藏或显示组件的元素。

export class AppComponent  {
  headerFooterVisible: boolean;
  constructor(private router: Router){
    router.events.subscribe(e => {
    if(e instanceof NavigationEnd){
      if(e.urlAfterRedirects != '/'){
        this.headerFooterVisible= true;
      }else{
        this.headerFooterVisible= false;
      }

    }
  });
  }
  name = 'Angular 4';
  private activatedComponent;
  onActivate(component){
    this.activatedComponent = component;
  }


<menu *ngIf="headerFooterVisible"></menu>
<router-outlet (activate)='onActivate($event)'></router-outlet>
<footer *ngIf="headerFooterVisible"></footer>

我希望变量{{headerFooterVisible}}实时显示在我的每个组件中。我该怎么办？

这是我的代码：

https://stackblitz.com/edit/angular-m6ffqn?file=app/another.component.ts

Answer 1

您可以使用BehavoirSubject创建服务，该服务将存储headerFooterVisible中的值。在要访问headerFooterVisible的componenet中，您可以在ts中订阅此服务并获取价值，或在html中使用async pipe。

例如-CacheService：

export class CacheService {

  readonly headerFooterVisible$: Observable<boolean>;
  private headerFooterVisibleSubject: BehaviorSubject<boolean> = new BehaviorSubject(false); // this place you can set first value, you can choose true or false

  constructor() {
    this.headerFooterVisible$ = this.headerFooterVisibleSubject.asObservable();
  }

  addNewValueToSubject(value: boolean) {
      this.headerFooterVisibleSubject.next(value);
  }
}

在组件中，您必须注入此服务。

constructor(private cacheService: CacheService) {}

想要获得价值时：

this.cacheService.headerFooterVisible$.subscrive((value: boolean) => console.log(boolean);

并添加新值：

this.cacheService.addNewValueToSubject(this.headerFooterVisible);

您还记得关于takeUntil。

Answer 2

如果我正确理解您的问题，则可以使用

[hidden]="headerFooterVisible"

有关隐藏的更多信息： What is the equivalent of ngShow and ngHide in Angular 2+?