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

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>

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

带有主路由器的app.ts

路由组件html模板

路线

1 个答案: