带参数的 Angular 4 延迟加载 [英] Angular 4 Lazy Loading with parameters

问题描述

您好，我正在尝试延迟加载详细信息模块"，同时还通过 URL 发送参数.

Hello I am attempting to lazy load a "detail module" while also sending parameters via the 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:"参数加载详细信息.

I would like to route to this 'activity-detail.module' and then load details using the ":name", and "id:" parameters.

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

The module which loads has its own routes file.

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: '/'
    }

];

如果没有第一个默认对象，似乎什么都不起作用.我收到错误:

It seems without the first default object nothing works. I get the error:

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

TypeError: Cannot read property 'path' of null

使用默认对象，我收到错误:

With the default object in place I get the error:

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

任何帮助将不胜感激.

推荐答案

我认为这行不通:

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

它无法将空"路径与带参数的路径相匹配.

It can't match an "empty" path to a path with parameters.

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

The syntax for your lazy loaded route is quite a bit more complex than mine. Mine looks like this:

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

请注意，此处在延迟加载路由上定义了父"路由(在此示例中为电影")，并且未在加载模块路由中重复.

Notice that "parent" route ('movies' in this example) is defined here on the lazy loaded route, and NOT repeated in the loaded modules routes.

例如:

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

我认为在你的情况下，加载模块的路由应该是这样的:

I would think in your case that the loaded module's routes should look something like this:

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

(尽管您可能需要考虑放弃自定义重用策略，直到基本路由正常工作.)

(Though you may want to consider leaving off the custom reuse strategy until you have the basic routes working.)

这篇关于带参数的 Angular 4 延迟加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！