时间戳

首页 > 解决方案 > 将路由组件拆分到两个出口

angular - 将路由组件拆分到两个出口

问题描述

我想知道是否可以将组件拆分到两个路由器插座？例如，我有两个未嵌套的路由器插座：

<router-outlet></router-outlet>  
<router-outlet name="second"></router-outlet>

, 带有特定组件的路由，其中​​包含：

<div #a></div>
<div #b></div>

并在导航到路径后div#A转到。<router-outlet>div#B<router-outlet name="second">

或者也许有更好的方法将一些 HTML 数据传递给位于外部的组件<router-outlet>？

谢谢。

标签： angular

解决方案

如果您想在两个路由器插座之间拆分内容，您需要将您的模板分解为两个单独的组件，然后设置您的路由以使用命名路由器插座。

例子


const routes: Routes = [
  {
    path: 'view',
    component: OutletAComponent,
    outlet: 'a',
  },
  {
    path: 'view',
    component: OutletBComponent,
    outlet: 'b',
  },
];

@NgModule({imports: [RouterModule.forRoot(routes)], exports: [RouterModule]})
export class AppRoutingModule {}

接下来我们需要一个组件来托管我们的两个路由器插座

  <!-- app.component.html -->
  <a [routerLink]="[{ outlets: { a: ['view'], b: ['view'] } }]">Go to view</a>
  <router-outlet name="a"></router-outlet>
  <router-outlet name="b"></router-outlet>

请注意，路由不一定需要相同，在这种情况下view，只是为两者选择了路由，以说明如何设置具有两条路由的路由器出口。

重要的方面只是要了解outletsprop 具有必须与所需的路由器出口名称匹配的键值，并且伴随的值将是所需的路由。

参见 Stackblitz：https ://stackblitz.com/edit/angular-ivy-vvdvtc

推荐阅读