Question

我在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 }
]

我看到几个关于倍数出口的例子，例如：

https://github.com/onehungrymind/ng2-named-router-outlets

我在这个项目中看到，两个“出口”在同一个dom级别，在父组件下面，这是一个限制吗？，或者我可以在DOM结构的任何位置定义出口并链接任何组件whitout distintion。

有什么想法吗？

更新

当来自组件：“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]

路由器和多路插座

0 个答案: