Javascript Angular 2.4.0路由器：命名路由。错误：无法匹配任何路由

我试图了解命名路由是如何工作的。我正在尝试建立2个路由器出口。这是我得到的实际错误

异常：未捕获（承诺中）：错误：无法匹配任何路由。URL段：“歌曲/编辑/58ab2f3907dc8edf2c4e6971”

下面是一些代码片段，它们显示了我正在尝试做的事情

app.routing.ts

const appRoutes: Routes = [
  { path: 'songs', component: SongsComponent},
  { path: 'song/edit/:id', component: SongsComponent, outlet: "details" }
];

app.component.ts

@Component({
    template: `
        <button (click)="showDetail($event,song)">Show Detail</button>
        <router-outlet>Songs Here</router-outlet>
        <router-outlet name="details">Song Detail Here</router-outlet>
        `
    export class AppComponent {
        showDetail(event: any,song: Song) {
          event.stopPropagation();
          let link = ['/song/edit', song._id];
          this.router.navigate(link);
        }
    }
});

@组件({
模板：`
显示细节
这里的歌曲
歌曲细节在这里
`
导出类AppComponent{
showDetail（事件：任意，歌曲：歌曲）{
event.stopPropagation（）；
让链接=['/song/edit'，song._id]；
这个.路由器.导航（链接）；
}
}
});

---

作为旁注，我最终想要做的是在导航到SongComponent时将SongsComponent保留在DOM中。有了2个路由器出口，SongsComponent将保留在DOM中，我可以在其中隐藏和显示它，而不必为SongsComponent重新生成DOM（如果它使用与SongComponent相同的路由器出口）

由于您正在尝试路由到命名路由，因此需要在router命令中提及相同的路由

试试下面

    showDetail(event: any,song: Song) {
      event.stopPropagation();
      let link = [{
        outlets: {
          details: ['song','edit',song._id]
        }
      }];
      this.router.navigate(link);
    }

这是我的名字

---

希望这有帮助

您可以尝试使用

let link=['song/edit'，song.\u id]

（删除首字母

/

）。谢谢ConnorsFan 1。获取相同的错误：无法匹配任何路由。URL段：“song/edit/58ab2f3907dc8edf2c4e6971”感谢Madhu仍然收到相同的错误：错误：无法匹配任何路由。URL段：'song/edit/58ab2f3907dc8edf2c4e6971'@MartyB，添加了一个plunker示例。看看是否有帮助，干杯！！Madhu你的代码成功了！我最初在view方法中测试了您的修复，这是我的错误。谢谢，我试过投票给你，但我的票数还不到15reputation@MartyB，很高兴听到，您可以接受答案，干杯！！