Question

我正在通过名为route（位于AppComponent中的根组件来加载我所有的app.component.ts，如下所示：

app.component.html：

<app-header></app-header>

<div class="container">
  <div class="row">
    <div class="col-12">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

<app-footer></app-footer>

到目前为止一切都很好。但是，现在我想在整个页面上加载LoginCompoent（在/ login路由）。意味着应该没有header或footer，应该只有一个组件，当我登录/ login时，会加载LoginComponent。

我知道我可以创建一个新的根组件，根据AppComponent加载LoginComponent或route。但是我想知道是否有一种简单的方法来实现这一目标。

Answer 1

据我所知，正确的方法是为身份验证组件和核心组件创建两个单独的模块。在app.component中，只有<router-outlet>会显示auth或core。在核心中，将应显示在当前结构中的所有组件

<app-header></app-header>

<div class="container">
  <div class="row">
    <div class="col-12">
    <router-outlet></router-outlet>
  </div>
 </div>
</div>

<app-footer></app-footer>

通过这种方式，您将保持app.component的清洁，并且不会对程序造成任何麻烦。

Here's the general idea，但我建议将它们包装到单独的模块中。

在根组件之外加载组件

1 个答案: