无法在延迟加载模块中加载同级路由组件

Question

我似乎无法从延迟加载的功能加载同级路由。第一个组件加载-PlayListsComponent。但是我无法从那里导航到兄弟路线-播放列表/：id。我相信这与“路径”有关。

我从已加载的组件调用Navigation时尝试使用相对路径选项。

const ROUTES = [

  {
    path: '',
    component: PlayListsComponent,
    resolve: {data: PlayListsResolverService},
  },
  {
    path: 'playlist/:id',
    component: PlayListComponent
  },
  {
    path: 'playlist-add/:id',
    canLoad: [AuthGuard],
    loadChildren: '../playlist-edit/playlist-edit.module#PlaylistEditModule'
  },
];

@NgModule({
  declarations: [PlayListsComponent],
  imports: [
    RouterModule.forChild(ROUTES),
    SharedModule
  ],
  providers: [PlayListsResolverService]
})
export class PlaylistViewModule {}

这就是我所谓的navigation方法。也许['播放列表']不是正确的路径...

  handlePlaylist(pl) {
    this.playlistService.setCurrentPlaylist(pl);
    this.router.navigate(['playlist', pl.playlist_id, {
      snapshotId: pl.snapshot_id,
      totalTracks: pl.tracks.total,
      playlistName: pl.name
    }, {relative: this.route}]);
  }

现在，我可以看到路由器获取了正确的url，附加了id但不匹配，因此调用了通配符默认组件，这是主模块路由配置中的登录组件。

我希望可以加载播放列表/：id组件。

我想念什么？这是正确的设置吗？欢呼！

Answer 1

所以在这里引用相对路径是一个问题。

handlePlaylist(pl) {
    this.playlistService.setCurrentPlaylist(pl);
    this.router.navigate(['playlist',{
      snapshotId: pl.snapshot_id,
      id: pl.playlist_id,
      totalTracks: pl.tracks.total,
      playlistName: pl.name
    }], { relativeTo: this.route });
  }