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

Question

我知道通常是让您的 app-root（根组件）在其中添加工具栏、边栏等，并有一个 <router-outlet> 来更改内容。

我的问题是我的根组件 (app-root) 是通过 index.html 注入的

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

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

我希望使用类似 auxiliary/child 的路由，但我并不完全理解它们。一个好的场景是登录屏幕继续按原样工作，它被注入路由器出口，但所有其他路由需要将自己注入路由器出口以及一些共享内容。

<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>

我应该在这里做什么？

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

Answer 1

我建议：

将你分享的内容放在app-root组件中，根据activatedRoute使用classhidden或者ngif隐藏。
如果你有像（登录用户）这样的状态，将用户从不包含共享内容的页面重定向到包含共享内容的页面，你可以将你的应用程序分成两个模块，将所有页面设置为共享内容在模块上并在该模块上创建具有所有共享内容和路由器出口的迷你应用程序根组件。
创建包含所有共享内容和路由器插座的组件，并在 route.module 使用加载子项导航到任何组件。

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

Angular: Adding a side bar to most pages (router) without using root-component?

angular

angular2-routing

router-outlet