angular：如何使用slug名称而不是分层路由名称？

Question

棱角4 +

是否可以在angular？

中使用slug名称路由而不是分层路由名称

使用此：https://example.com/some-cool-product-name

而不是：https://example.com/product/some-cool-product-name

据我所知，第一个要求路由定义中只使用一个组件：

export const routes: Route[] = [
  {
    path: ':slugName',
    component: MyComponent,
  },
]

这将是非常有限的。还有另一种方式吗？也许基于slugName的一些动态组件选择？

修改

我找到了这个文档页面https://angular.io/guide/dynamic-component-loader 并编辑它以满足要求，工作示例：https://stackblitz.com/edit/angular-jztvhx