Angular 路由器和多路出口

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

我看到了几个关于多个销售点的示例：

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

有什么想法吗

更新：

从组件“AgendaComponent”中，我希望导航到详细信息“AgendaDetailsComponent”

错误是：

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]

---

为什么不提供服务？在您的组件中，您调用更改sidenav链接的服务？我有一个打开或关闭sidenav的服务，但是，我相信sidenav中的内容是导航组件（子路由器）的责任。您有一个例子吗？服务的职责是实现两个组件之间的通信。在这种情况下，您的内容组件和sidenav可能是一种可接受的方式。目前我没有例子，这只是一个想法。抛出了什么错误？我用错误更新了问题。。。

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]