没有布局Angular 4的身份验证页面的路由

Question

我想在我的登录/注册页面上隐藏我的布局，但我不知道如何正确地做到这一点。我不想在这些页面上使用覆盖来覆盖布局，而且我认为不应该通过询问它是什么路线并在某些路线被击中时隐藏元素来完成。

我的布局组件：

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

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

Answer 1

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

然后就可以路由到登录页面，不会出现多余的布局。

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

有意义吗？

所以应用组件：

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

Login 和 Main 组件将被路由到这个路由器出口。

主组件：

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

所有其他组件将是 MainComponent 的子组件并路由到此路由器出口。