Angular 角度：在不使用根组件的情况下为大多数页面（路由器）添加侧栏？_Angular_Angular2 Routing_Router Outlet

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

angular

Angular 角度：在不使用根组件的情况下为大多数页面（路由器）添加侧栏？,angular,angular2-routing,router-outlet,Angular,Angular2 Routing,Router Outlet,我知道正常的做法是让你的应用程序根目录（根目录组件）添加工具栏、侧栏等，并使用更改内容我的问题是我的根组件（approot），它是通过index.html注入的，就像这样 <body> <app-root></app-root> </body> 无法包含边栏、菜单等，因为我希望提供一个登录屏幕（和其他屏幕），其中不得包含这些半共享组件。因此，现在我的应用程序根目录包含一个简单的，它非常适合我的登录和其他不能共享共享内容的页面，如侧边栏、

我知道正常的做法是让你的

应用程序根目录

（根目录组件）添加工具栏、侧栏等，并使用

更改内容

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

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

无法包含边栏、菜单等，因为我希望提供一个登录屏幕（和其他屏幕），其中不得包含这些半共享组件。因此，现在我的应用程序根目录包含一个简单的

，它非常适合我的登录和其他不能共享共享内容的页面，如侧边栏、菜单等

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

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


侧栏中的内容示例

我在这里该怎么办

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

我建议：

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

将共享内容放在应用程序根组件中，并根据activatedRoute使用class hidden或ngif隐藏它们

如果您具有将用户从不包含共享内容的页面重定向到包含共享内容的页面的类似状态（loggedIn user），则可以将应用程序划分为两个模块，在模块上设置包含共享内容的所有页面，并在该模块上创建包含所有共享内容和路由器出口的迷你应用程序根组件

创建包含路由中所有共享内容和路由器出口的组件。模块使用加载子项导航到任何组件

为什么不在登录完成之前一直打开侧边栏？这是我正在使用的应用程序上的内容：