我在Angular 2的新项目中工作,只有一个问题,我需要一个建议 . 我需要一个sidenav,你的内容根据路由(辅助路由器)而不同 .

例如:我有一个主要路线,一个人名单,每次点击人,有关人的一些信息显示在sidenav . 如果我按照以下方式定义dom结构(app.component),则会抛出错误 .

<md-sidenav-layout fullscreen>
  <md-sidenav #sidenav mode="side">
    <md-nav-list>
      <a md-list-item>
        <md-icon md-list-icon></md-icon>
        <span md-line></span>
        <span md-line class="desc"></span>
      </a>
      <a md-list-item>
        <md-icon md-list-icon></md-icon>
        <span md-line></span>
        <span md-line class="desc"></span>
      </a>
    </md-nav-list>
  </md-sidenav>

  <md-toolbar color="primary">

    <div style="flex:1">
      <button md-icon-button (click)="sidenav.toggle()">
        <md-icon>menu</md-icon>
      </button>
      <span>---</span>
    </div>

    <button md-icon-button [mdMenuTriggerFor]="account">
      <md-icon>more_vert</md-icon>
    </button>

    <md-menu #account="mdMenu">
      <button md-menu-item>
        <md-icon>settings</md-icon>
        <span>Settings</span>
      </button>
      <button md-menu-item>
        <md-icon>help</md-icon>
        <span>Help</span>
      </button>
      <button md-menu-item>
        <md-icon>logout</md-icon>
        <span>Logout</span>
      </button>
    </md-menu>
  </md-toolbar>

  <router-outlet></router-outlet>

  <md-sidenav  #sidenavInfo align="end" mode="side">
    <router-outlet name="info"></router-outlet>
  </md-sidenav>

</md-sidenav-layout>

而路由器的定义是:

export const ContactsAppRoutes = [
    { path: '',   redirectTo: '/planos', pathMatch: 'full' },
    { path: 'viewer/:id', component: ViewerComponent },
    { path: 'planos', component: AgendaComponent },
    { path: 'planos/:id', outlet: 'info', component: AgendaDetailsComponent }
]

我看到几个关于倍数出口的例子,例如:

我在这个项目中看到,两个“出口”在同一个dom级别,在父组件下面,这是一个限制吗?,或者我可以在DOM结构的任何位置定义出口,并链接任何组件的白色区分 .

任何的想法?

更新:

当来自组件:“AgendaComponent”时,我想导航到详细信息“AgendaDetailsComponent”

this.router.navigate (['planos', {outlets: {'info': [p.id]}}]);

错误是:

EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'planos'
Error: Cannot match any routes. URL Segment: 'planos'
    at ApplyRedirects.noMatchError (http://localhost:4200/vendor.bundle.js:109231:16) [angular]
    at CatchSubscriber.selector (http://localhost:4200/vendor.bundle.js:109200:29) [angular]
    at CatchSubscriber.error (http://localhost:4200/vendor.bundle.js:55124:31) [angular]
    at MapSubscriber.Subscriber._error (http://localhost:4200/vendor.bundle.js:471:26) [angular]
    at MapSubscriber.Subscriber.error (http://localhost:4200/vendor.bundle.js:445:18) [angular]
    at MapSubscriber.Subscriber._error (http://localhost:4200/vendor.bundle.js:471:26) [angular]
    at MapSubscriber.Subscriber.error (http://localhost:4200/vendor.bundle.js:445:18) [angular]
    at MapSubscriber.Subscriber._error (http://localhost:4200/vendor.bundle.js:471:26) [angular]
    at MapSubscriber.Subscriber.error (http://localhost:4200/vendor.bundle.js:445:18) [angular]
    at LastSubscriber.Subscriber._error (http://localhost:4200/vendor.bundle.js:471:26) [angular]
    at LastSubscriber.Subscriber.error (http://localhost:4200/vendor.bundle.js:445:18) [angular]
    at MergeAllSubscriber.OuterSubscriber.notifyError (http://localhost:4200/vendor.bundle.js:850:26) [angular]
    at InnerSubscriber._error (http://localhost:4200/vendor.bundle.js:115294:21) [angular]
    at InnerSubscriber.Subscriber.error (http://localhost:4200/vendor.bundle.js:445:18) [angular]