是否可以在角度2中动态构建添加路由?

xai*_*oft 17 angular

我正在构建一个用户可以选择要使用的页面的cms.因此,如果用户想要一个联系页面,他们会选择它并为其填写一些内容,并且他们的网站会有一个contact路由.基于此,是否可以根据用户是否想要特定页面动态添加角度路线?

Tyl*_*ngs 42

是.有多种方法可以实现您的需求.您可以使用router.resetConfig新配置重置路由器的配置:

this.router.resetConfig([
 { path: 'somePath', component: SomeComponent},
 ...
]);
Run Code Online (Sandbox Code Playgroud)

您还可以push路由到配置:

this.router.config.push({ path: 'somePath', component: SomeComponent });
Run Code Online (Sandbox Code Playgroud)

我这样做的另一种方式是我已经设法用户可以使用类似TinyMCE的东西构建页面并指定他们希望页面具有的URL路径.在Angular中,我在路由器中指定了一个通配符路由{ path: '**', component: ComponentBuilder },其中ComponentBuilder组件将从数据库中获取与某人请求的路径对应的模板,然后使用模板动态生成组件.如果数据库中不存在Page cannot be found模板,则呈现正常模板.

两种方式都有效.它归结为您希望应用程序如何运行以及如何构建用户创建的页面.

自从我在第2版rc4中提出的解决方案以来,有很多关于如何创建动态组件的文档和示例.我没有使用过这些,但它看起来很有帮助:

动态组件的NPM包

动态组件加载器的Angular Docs

动态创建组件

关于动态创建组件的另一篇文章