Question

我试图了解命名路线的工作原理。我正在尝试建立2个路由器插座。这是我得到的实际错误......

EXCEPTION：未捕获（承诺）：错误：无法匹配任何路由。网址细分：＆＃39;歌曲/编辑/ 58ab2f3907dc8edf2c4e6971＆＃39;

以下是代码片段，展示了我要做的事情......

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

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

Answer 1

由于您尝试路由到命名路由，因此需要在路由器命令中提及

尝试以下，

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

这是Plunker !!

希望这会有所帮助!!

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

1 个答案: