typescript 路由配置：多重路由

Posted 2021-05-21

// 虽然compose路由被钉死在了popup出口上，但这仍然不足以向RouterLink指令表明要加载该路由。 我们还要在链接参数数组中指定这个命名出口，并通过属性绑定的形式把它绑定到RouterLink上。

// 链接参数数组包含一个只有一个outlets属性的对象，它的值是另一个对象，这个对象以一个或多个路由的出口名作为属性名。 在这里，它只有一个出口名“popup”，它的值则是另一个链接参数数组，用于指定compose路由。
<a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>

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

{
  path: 'compose',
  component: ComposeMessageComponent,
  outlet: 'popup'
},