首页 文章

Angular 4延迟加载参数

提问于
浏览
2

您好我试图延迟加载“详细模块”,同时通过URL发送参数 .

这是我的懒加载路线:

{
    path: 'venue/:name/:id',
    loadChildren: () => System.import('../containers/activity-detail/activity-detail.module').then((file: any) => {
        return file.default;
    })
},

我想路由到这个'activity-detail.module',然后使用“:name”和“id:”参数加载详细信息 .

加载的模块有自己的路由文件 .

export const VenueDetailRoutes: Route[] = [
    {
        path: '',
        redirectTo: 'venue/:name/:id',  
        pathMatch: 'full'
    },
    {
        path: 'venue/:name/:id', 
        component: VenueDetailComponent,
        data: {
            shouldDetach: true, // Route will be resused. See CustomResuseStrategy.
            title: null
        }
    },
    {
        path: '**',
        redirectTo: '/'
    }

];

似乎没有第一个默认对象没有任何作用 . 我收到错误:

{
    path: '',
    redirectTo: 'venue/:name/:id', 
    pathMatch: 'full'
},

TypeError: Cannot read property 'path' of null

使用默认对象我得到错误:

Error: Cannot redirect to 'venue/:name/:id'. Cannot find ':name'.

任何帮助将不胜感激 .

1 回答

  • 7

    我认为这不起作用:

    {
        path: '',
        redirectTo: 'venue/:name/:id',  
        pathMatch: 'full'
    },
    

    它无法匹配带参数的路径的“空”路径 .

    延迟加载路由的语法比我的复杂得多 . 我看起来像这样:

    {
        path: 'movies',
        loadChildren: './movies/movie.module#MovieModule'
    },
    

    请注意,“父”路由(此示例中为“电影”)在延迟加载的路由中定义,并且不会在加载的模块路由中重复 .

    例如:

    RouterModule.forChild([
      { path: '', component: MovieListComponent },
      { path: 'search', component: MovieSearchComponent },
      { path: ':id', component: MovieDetailComponent }
    ])
    

    在你的情况下,我认为加载模块的路由应该如下所示:

    export const VenueDetailRoutes: Route[] = [
        {  
           path: ':name/:id', 
           component: VenueDetailComponent,
            data: {
                shouldDetach: true, // Route will be resused. See CustomResuseStrategy.
                title: null
            }
        }    
    ];
    

    (尽管您可能需要考虑在基本路由工作之前不要使用自定义重用策略 . )

相关问题