angular - 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.componenthome.component.html.container-fluid

有没有 Angular 的方法可以做到这一点？

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

score 0 · Accepted Answer

您的 home 组件可以像这样简单。确保您为回家设置了单独的全球路线。

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

如果需要，您也可以保留通往 ' ' 的回家路径

主页组件模板 - home.html

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

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

1 回答 1