具有Angular4中具有動態路由的Router Guard的延遲加載模塊

Question

我有一個具有多個具有動態路由的組件的單個惰性加載模塊，每個組件都由路由器Guard定義。因此，如何為具有動態路由的每個組件配置路由。 對於每個路由路徑，我都能看到相同的組件，並且當我使用url手動路由時，出現錯誤“ Guard不是功能”。

下面是我的代碼：mycomponent.module.ts

@NgModule({

    imports: [
        routing,
        SharedModule,
        CommentsModule,
    ],
    declarations: [
                    MyComponent1,
                    MyComponent2,
                    MyComponent3,
                    MyComponent4,
                    MyComponent5,
    ],
    providers: [mycomponentService]

})
export class MyComponentModule { }

---

mycomponent.routing.ts

const routes: Routes = [
    {
        path: '',
        canActivate: [AuthGuard],
        canActivateChild: [AuthGuard],
        children: [
            { path: '/my-todos', component: MyComponent1 },
            { path: '/edit-my-todo/:tid', component: MyComponent2 },
            { path: '/edit-my-todo/single-todo/:tid', component: MyComponent2 },
            { path: '/edit-my-todo/multi-todo/:tid', component: MyComponent2 },
            { path: '/add-todo', component: MyComponent3 },
            { path: '/multiple-todo-details/:tid', component: MyComponent4 },
            { path: '/todo/:alias', component: MyComponent5 },
            { path: '/todo-preview/:tid', component: MyComponent5 },
        ]
    },
];

---

應用程序路由

 {
    path: '', 
    loadChildren:'app/mycomponent/mycomponent.module#MyComponentModule'   
};

如何為該動態路由配置路由，即使我面臨gaurd錯誤也不是功能。 有誰知道如何為以上配置路由。 有人遇到過同樣的問題嗎？ 任何幫助將是巨大的幫助。 預先感謝您的幫助。

Answer 1

我想出了配置路由的方法。 希望這對以后的人有幫助

mycomponent.routing.ts

     const routes: Routes = [
        { path: 'my-todos', component: MyComponent1 },
        { path: 'edit-my-todo/:tid', component: MyComponent2 },
        { path: 'edit-my-todo/single-todo/:tid', component: MyComponent2 },
        { path: 'edit-my-todo/multi-todo/:tid', component: MyComponent2 },
        { path: 'add-todo', component: MyComponent3 },
        { path: 'multiple-todo-details/:tid', component: MyComponent4 },
        { path: 'todo/:alias', component: MyComponent5 },
        { path: 'todo-preview/:tid', component: MyComponent5 },

];

應用程序路由

 {
       path: '',
       canActivate: [AuthGuard],
       canActivateChild: [AuthGuard],
       children: [
                   { path: '',
                     loadChildren: 
                     'app/mycomponent/mycomponent.module#MyComponentModule' 
                   },
                ],
  }

這工作正常，效果很好。