Angular 动态路由出口不起作用

Question

我有一个简单的路线配置

const appRoutes: Route[] = [
  {
    path: 'route',
    outlet: 'outlet',
    component: TestComponent,
  }
];

我想要做的是每次单击

create router outlet

按钮时，使用与上面现有路线类似但具有不同出口名称的新路线更新当前应用程序路线配置。创建一个新的路线出口，名称属性设置为

outlet-1

 const appRoutes: Route[] = [
      {
        path: 'route',
        outlet: 'outlet',
        component: TestComponent,
      },
      {
        path: 'route',
        outlet: 'outlet-1',
        component: TestComponent,
      }
    ];

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

当我导航到这个新路线出口时，

TestComponent

应呈现在相应出口下方。

this.router.navigate([{ outlets: { ['outlet-1']: ['route'] } } ]);

我能够实现上面描述的目标，但是测试组件被创建了多次。

这是一个stackblitz

打开浏览器控制台

单击按钮一次 ->

test component constructor.

记录一次。

第二次点击按钮 ->

test component constructor.

已记录 2 次。

第三次点击按钮 ->

test component constructor.

已记录 3 次。

等等..

理想情况下，每次单击按钮都应记录一次消息。有什么问题吗？

Answer 1

通过

resetConfig()

重新定义路由器后，Angular 会再次将所有组件重新渲染到路由中。