Question

Iam使用默认的路由配置在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"}

所以我如何用新值覆盖路由

预先感谢

Answer 1

您可以随时随地向您的Router实例添加路由。

您需要访问路由数组并添加一个新数组，如下所示：

this.router.config.unshift({path: 'myNewRoute', component: ProductListComponent});

装饰器元数据解决方案

在您的情况下，您需要访问Module元数据，更确切地说是Decorator的声明，以搜索所需的组件。您可以检查组件的名称是否与数据库收到的名称匹配。

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});

显然可以随意添加完整性检查。

映射解决方案

您可以更简单地像这样对db字符串和组件进行映射：

let mapping = {
  'myNewRoute': ProductListComponent,
   ...
}

然后按以下步骤取消新路线：

this.router.config.unshift({path: 'myNewRoute', component: mapping['myNewRoute']});

来自数据库的Anuglar 6路线

1 个答案: