具有Angular4中具有动态路由的Router Guard的延迟加载模块 [英] Lazy load module with Router Guard with dynamic routes in Angular4

问题描述

我有一个带有多个具有动态路由的组件的单个惰性加载模块，每个组件都由路由器防护定义.因此，如何为具有动态路由的每个组件配置路由.对于每个路由路径，我都能看到相同的组件，并且当我使用url手动路由时，出现错误"Guard不是功能".

I have single lazy load module with multiple components having dynamic routes each component define by router guard.So how to configure routes for each component having dynamic routes . For every route path i am able to see the same component and when i route manually using url am getting error "Guard is not a function".

以下是我的代码:mycomponent.module.ts

Below is my code: mycomponent.module.ts

@NgModule({

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

})
export class MyComponentModule { }

---

mycomponent.routing.ts

---

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

---

app.routing.ts

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

如何为此动态路由配置路由，即使我面临gaurd错误也不起作用.有谁知道如何为以上配置路由.有人遇到过同样的问题吗?任何帮助将是巨大的帮助.预先感谢您的帮助.

How to configure routes for this dynamic routes, even I am facing error of gaurd is not a function. Does anyone know how to configure routes for above. Does anyone face the same issue before. Any help would be great help. Thank you in advance for the help.

推荐答案

我想出了配置路由的方法.希望这对以后的人有帮助

I figured out, the way of configuring the routes. Hope this helps someone in future

mycomponent.routing.ts

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

app.routing.ts

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

这工作正常，效果很好.

This is working fine and works well.

这篇关于具有Angular4中具有动态路由的Router Guard的延迟加载模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！