我正在开发具有默认路由配置的 Angular 6 应用程序, 我的问题是如何在用户登录后从数据库加载路线,这就是我现在的路线。
const routes: Routes = [
{
path: "",
redirectTo: "dashboard",
pathMatch: "full"
},
{
path: "services",
data: { breadcrumb: "Services" },
component: ServicesComponent,
}]
API 返回以下结果
{Path: "/Services", Component: "ServicesComponent"}
{Path: "/Dashboard", Component: "DashboardComponent"}
那么我如何用新值覆盖路线
提前致谢
您可以随时随地动态添加路由到您的
Router
实例。
您需要访问路由数组并添加一个新数组,如下所示:
this.router.config.unshift({path: 'myNewRoute', component: ProductListComponent});
装饰器元数据解决方案:
在您的情况下,您需要访问
Module
元数据,更准确地说是 Decorator
的声明来搜索您需要的组件。您可以检查该组件的名称与 DB 收到的名称是否匹配。
let compName = 'ProductListComponent';
let comp: Type<any> = (<any>AppModule).__annotations__[0].declarations.find(comp => {
return comp.name === compName;
});
this.router.config.unshift({path: 'myNewRoute', component: comp});
显然可以随意添加完整性检查。
地图解决方案
您可以更简单地创建数据库字符串和组件的映射,如下所示:
let mapping = {
'myNewRoute': ProductListComponent,
...
}
然后按如下方式取消移动新路线:
this.router.config.unshift({path: 'myNewRoute', component: mapping['myNewRoute']});