Angular4中带有动态路由的Router Guard延迟加载模块答案

【问题标题】：Lazy load module with Router Guard with dynamic routes in Angular4Angular4中带有动态路由的Router Guard延迟加载模块
【发布时间】：2018-07-04 17:57:13
【问题描述】：

我有单个延迟加载模块，其中多个组件具有动态路由，每个组件由路由器保护定义。那么如何为每个具有动态路由的组件配置路由。对于每个路由路径，我都能够看到相同的组件，并且当我使用 url 手动路由时出现错误“Guard is not a function”。

以下是我的代码：我的组件.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 },
        ]
    },
];

app.routing.ts

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

如何为此动态路由配置路由，即使我面临 gaurd is not a function 的错误。有谁知道如何配置上述路线。有没有人遇到过同样的问题。任何帮助都会有很大帮助。提前感谢您的帮助。

【问题讨论】：

标签： angular angular2-template angular4-router

【解决方案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 },

];

app.routing.ts

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

这很好用。

【讨论】：