Angular 4 带参数的延迟加载

Question

您好，我正在尝试延迟加载 "detail module"，同时还通过 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'.

如有任何帮助，我们将不胜感激。

Answer 1

我认为这行不通：

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

无法将 "empty" 路径与带参数的路径相匹配。

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

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

注意 "parent" 路由（本例中的 'movies'）是在延迟加载路由中定义的，不会在加载模块路由中重复。

例如：

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
        }
    }    
];

（尽管您可能想考虑放弃自定义重用策略，直到基本路由正常工作。）

Angular 4 带参数的延迟加载

Angular 4 Lazy Loading with parameters

angular-routing

angular