@路由器出口中用于样式设置的角/路由器换行路由组件

Question

我有一个简单的有角度的[[（8 +）应用程序，使用@angular/router并将多个组件作为路线，每个组件都使用@angular/animations进行过渡。

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

我当前的版本效果很好，

但是我必须手动添加<div>并希望找到一种自动解决方案像@angular/animations一样。

带有主路由器的应用程序

  <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 /包装器中。

RouteShellComponent：

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

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

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