Angular：在不使用根组件的情况下向大多数页面（路由器）添加侧边栏？答案

【问题标题】：Angular: Adding a side bar to most pages (router) without using root-component?Angular：在不使用根组件的情况下向大多数页面（路由器）添加侧边栏？
【发布时间】：2017-08-09 07:57:17
【问题描述】：

我知道正常情况是让您的app-root（根组件）在其中添加工具栏、侧边栏等，并使用<router-outlet> 来更改内容。

我的问题是我的根组件（app-root）是通过 index.html 注入的，就像这样

<body>
  <app-root></app-root>
</body>

不能包含边栏、菜单等，因为我希望提供一个不能包含这些半共享组件的登录屏幕（和其他屏幕）。所以现在我的 app-root 包含一个简单的<router-outlet>，它非常适合我的登录和其他不得共享共享内容的页面，即侧边栏、菜单等。

我希望使用辅助/子路线之类的东西，但我并不完全理解它们。一个好的场景是登录屏幕继续按原样工作，它被注入到路由器插座中，但所有其他路由都需要将自己注入路由器插座以及一些共享内容。

<md-sidenav-container class="example-container">
  <md-sidenav #sidenav class="example-sidenav">
    An example of content  in the side bar
  </md-sidenav>

  <div class="example-sidenav-content">

     <!-- All other routes should be injected here -->       

  </div>

</md-sidenav-container>

我应该在这里做什么？

我当然不想通过复制/粘贴的方式在每个组件中放置侧边栏、菜单。应该是共享内容。

【问题讨论】：

为什么不直接在侧边栏*ngif 直到登录完成？这是我正在开发的应用程序上的内容：<user-side-panel *ngIf="activeUser" [active-user]="activeUser"></user-side-panel> <content> <router-outlet></router-outlet> </content>

标签： angular angular2-routing router-outlet

【解决方案1】：

我建议：

将您的共享内容放在 app-root 组件中，并使用 class hidden 或 ngif 隐藏它们，这取决于激活的Route。
如果您有类似 (loggedIn user) 的状态，将用户从不包含共享内容的页面重定向到包含共享内容的页面，您可以将您的应用程序划分为两个模块，在模块上设置所有具有共享内容的页面并在该模块上创建包含所有共享内容和路由器插座的 mini-app-root 组件。
创建包含所有共享内容和路由器插座的组件，并在 route.module 中使用加载子项导航到任何组件。

【讨论】：