1

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

我的问题是通过 index.html 注入的根组件（app-root），如下所示

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

我应该在这里做什么？

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

4

1 回答 1

1

我会建议：

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