如何在Angular中以编程方式路由动态页面

Question

我需要根据某些情况动态地路由页面。

 { path: ':locale/:id', component: HomePageCategory    },
 { path: ':locale/:platform', component: PlatformPageCategory    },
 { path: ':locale/contact', component: ContactPageCategory    },

以上是我的路由配置。第一和第二是动态的。我需要首先存档所有情况。我已经基于canActivate编写了服务。

但是我需要以编程方式路由页面，例如

router.navigate()
router.navigateByUrl()

在这种情况下，您能告诉我如何做吗？

Answer 1

根据您的信息，我建议您执行以下操作：

1. 在路由中添加root component并摆脱其他路由。 像这样 { path: ':locale/:param', component: RootComponent}

2. 在RootComponent内，订阅路由器，并解析您的动态参数，然后根据该参数选择要呈现的组件。

3. RootComponent的模板应仅包含<ng-container #host></ng-container>， 它将用作要渲染的组件的宿主元素。

4. 使用ComponentFactoryResolver（此处为https://angular.io/guide/dynamic-component-loader的文档）渲染组件。