Angular2 +：如何使父路由器插座适用于不同的子组件

Question

在我的Angular应用中，我有一个根app.component和几个子组件。 我的app.component.html看起来像这样：

<app-top-navigation></app-top-navigation>

<div class="container-fluid">
    <router-outlet></router-outlet>
</div>

问题在于我希望我的所有子组件页面都被<div class="container-fluid"包围，但home.component的异常。我不希望我的home.component.html被限制在.container-fluid将其放入的框中。

是否有Angular方法可以执行此操作？

P.S。我知道在我的简化示例中，我可以在home.component中应用一些特殊的CSS，但是假设它是一个更大的项目，并且有一些子组件需要这种特殊处理。

Answer 1

您的家庭组件可能很简单。 确保为家庭设置单独的全局路线。

componentRoutes: Routes = [
{
  path: '/home',
  component: HomeComponent
},{
  path: '',
  component: MainComponent
}];

如果你需要

，你也可以保留回家的路径

主页组件模板 - home.html的

<app-top-navigation></app-top-navigation>

<div class="home" >
    # Home page content
</div>