带参数的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.

这是我的延迟加载路线:

Here is my lazy loaded route:

{
    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'.

任何帮助将不胜感激.

Any help would be greatly appreciated.

推荐答案

我认为这不可行:

{
    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屋！