指定出口

Question

简单地说就是这样吗？

[routerLink]="['page1','page2',{ outlets: { myoutlet: ['page3','page4'] } }]"

路由配置如何？尽可能使用延迟加载。

编辑：

好的，所以看起来上面的情况是不可能的。所以我把我的路线重新排列成这样的......

const mainRoutes: Routes = [
  {
    path: 'main',
    component: MainIndexComponent,
    children: [
      {
        path: 'page1',
        component: Page1Component,
        outlet: 'mynamed'
      },
      {
        path: 'page2',
        component: Page2Component,
        outlet: 'mynamed'
      },
      {
        path: 'form',
        children: [
          {
            path: 'first',
            component: FirstFormComponent,
          }
        ]
      },
      {
        path: 'home',
        component: HomeComponent,
      }
    ]
  },
];

现在我想在'mynamed'出口和HomeComponent中查看Page1Component。 routerLink的外观如何？

我试过了：

[routerLink]="['guide','main','form', 'first', {outlets: {mynamed: ['page1']}} ]" 

但没有运气

编辑2（我的解决方案）：

[routerLink]="['guide','main','form', 'first' ]" 

这将在未命名的插座中打开页面...

[routerLink]="['guide','main',{outlets: {mynamed: ['page1']}} ]" 

这将打开mynamed outlet中的页面，而不会影响主插座

Answer 1

您可以在app-routing.module.ts中定义路线： { path: '%urlName%', component: %ComponentName%, outlet: '%routerOutletName%' }

然后在您的模板中，您可以使用： [routerLink]="['page1', 'page2', {outlets: {%routerOutletName%: ['%urlName%']}}]

在.ts文件中，您可以使用导航到路线： this.router.navigate(['page1', 'page2', { outlets: { %routerOutletName%: ['%urlName%'] } }]);

Source，Example