没有布局Angular 4的Auth页面的路由

Question

我想在我的登录/注册页面上隐藏我的布局，但我不确定如何正确地执行此操作。我不想在这些页面上使用叠加来覆盖布局，我不认为应该通过询问它是什么路线并在某些路线被击中时隐藏元素来完成。

我的布局组件：

<div class="body-wrapper">
  <div class="content">
    <app-header></app-header>
    <router-outlet></router-outlet>
  </div>
</div>

所以，我需要我的路由器插座只显示登录组件而不是其他html。

Answer 1

然后，您需要构建一个没有布局的简单主页，只需<router-outlet>。

然后您可以路由到登录页面，不会出现额外的布局。

然后，您可以导航到显示更详细布局的另一条路线，包括另一条路线。所有其他路线可以是该路线的子路线，因此它们将出现在详细布局中。

有意义吗？

所以AppComponent：

<div class="body-wrapper">
    <router-outlet></router-outlet>
</div>

Login和Main组件将路由到此路由器插座。

和MainComponent：

<div class="body-wrapper">
  <div class="content">
    <app-header></app-header>
    <router-outlet></router-outlet>
  </div>
</div>

所有其他组件都是MainComponent的子组件，并路由到此路由器插座。