javascript - 基于子组件的父组件的 Angular 显示/隐藏

Question

我有一个具有以下模板的父组件:

<app-sidebar></app-sidebar>
<router-outlet></router-outlet>
<app-footer></app-footer>

如何根据通过路由器导出的组件路由来显示或隐藏 app-sidebar 或 app-footer 组件？我有一个 bool showSidebar 我想使用，它的值在每个子组件上设置为 true 或 false。

<app-sidebar *ngIf=showSidebar></app-sidebar>

Answer 1

在应用程序路由中添加数据属性。

  { path: 'no-sidebar', component: NoSidebarComponent, canActivate: [AuthGuard], data: { showSidebar: false } },

并像这样订阅父组件中的路由器事件

this.router.events.subscribe(event => {
    if (event instanceof RoutesRecognized) {
      const routeData = event.state.root.firstChild.data;

      if (routeData) {
        this.showSidebar = routeData.showSidebar === false ? false : true
      }
    }
  }