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

Question

我想在我的 login/register 页面上隐藏我的布局，但我不确定如何正确地做到这一点。我不想在这些页面上使用叠加层来覆盖布局，而且我认为不应该通过询问它是什么路线并在遇到特定路线时隐藏元素来完成。

我的布局组件：

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

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

Answer 1

然后您需要使用 none 布局构建一个更简单的主页，只有 <router-outlet>.

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

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

有道理吗？

所以 AppComponent：

<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 的子组件并路由到此路由器出口。

Routes for Auth Pages without layout Angular 4