加载部件根组件的外(Loading a component outside of root comp

我加载我所有的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整个页面上（在/登录路由）。 含义应该是没有header或footer ，应该只有一个组成部分， LoginComponent加载当我去/登录。

我知道我可以创建一个加载新的根组件AppComponent或LoginComponent取决于上route 。 但我想知道如果有一个简单的方法来实现这一目标。

Answer 1:

那么正确的做法，因为据我所知，是做了权威性的部件和核心部件两个独立的模块。 而在app.component你将有只有<router-outlet> ，将显示身份验证或核心。 在核心您将所有应显示在当前的结构组件

<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干净，你不会有过程的任何头痛。

这里的总体思路 ，但我会建议他们包装成单独的模块。

文章来源: Loading a component outside of root component