您好我试图延迟加载“详细模块”,同时通过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: '',pathMatch: 'full' },TypeError: Cannot read property 'path' of null
使用默认对象我得到错误:
Error: Cannot redirect to 'venue/:name/:id'. Cannot find ':name'.
任何帮助将不胜感激.
解决方法
我认为这不起作用:
{ path: '',
它无法匹配带参数的路径的“空”路径.
延迟加载路由的语法比我的复杂得多.我看起来像这样:
{ 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',// Route will be resused. See CustomResuseStrategy. title: null } } ];
(尽管您可能需要考虑在基本路由工作之前不要使用自定义重用策略.)