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

问题描述

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

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.

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