@angular/router 在 router-outlet 中包装路由组件以进行样式设置

Question

我有一个简单的角度 (8+) 应用程序，使用 @angular/router 和多个组件作为路由，每个组件都使用 @angular/animations 进行转换。

<router-outlet> 指令是全屏使用 css width: 100vw 和 height: 100vh 覆盖默认滚动。我的想法是用<div> 或允许定义固定布局的特定类来包装每条路线。

我当前的版本运行良好，但我必须手动添加<div>，并希望找到一个自动解决方案，就像@angular/animations 一样。

带有主路由器的app.ts

  <main [@routerTransition]="getState(o)">
    <router-outlet #o="outlet"></router-outlet>
  </main>

路由组件html模板

<div class="route"> <!-- ???? class which should be automatically wrapped -->
  <div class="container">
    <h1>title</h1>
    <p>Blablabla</p>
  </div>
</div>

路线

// State is use to bind animation
export const appRoutes: Routes = [
  {
    path: 'page1',
    loadChildren: () => import('./page1/page1.module').then(mod => mod.Page1Module),
    data: { theme: 'light' }
  },
  {
    path: 'page2',
    loadChildren: () => import('./page2/page2.module').then(mod => mod.Page2Module),
    data: { theme: 'light' }
  },
  ...
];

就像我说的，这段代码工作完全符合预期，但必须手动维护某个 DOM 布局还不够好。

Answer 1

内容投影将完成这项工作。基本上你有一个外壳/包装器组件。并且你所有的单独路由组件都会将它们的内容投射到这个 shell/wrapper 中。

RouteShell 组件：

<div class="route">
    <ng-content></ng-content>
</div>

RouteA 组件：

<div class="container">
    <h1>title</h1>
    <div>...</div>
</div>

主要

<app-route-shell>
    <router-outlet></router-outlet>
</app-route-shell>