没有布局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>。

然后，您可以转到登录页面，并且不会显示任何额外的布局。

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

说得通？

因此，AppComponent：

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

登录和主要组件将被路由到该路由器出口。

和MainComponent：

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

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