angular - 错误 : Cannot find the outlet myteam_outlet to load 'MemberListingComponent'

Question

我已经尝试了 SO 中给出的所有解决方案，但没有成功。我的情况不同。

在主要组件中，我有一个加载子模块的导出。我在子模块中定义了子路由:

 RouterModule.forChild([
  { path: '', component: MyTeamComponent },
  { path: 'members', component: MemberListingComponent , outlet: 'myteam_outlet'}
])

默认路径 { path: '', component: MyTeamComponent }在 html 下方加载:

<div class="col-md-2 row">
  <md-toolbar color="primary">
    <md-toolbar-row>
      <a md-button [routerLink]="[{ outlets: { myteam_outlet: ['members'] } }]"
      [routerLinkActive]="['router-link-active']">Members Listing</a>
    </md-toolbar-row>

    <md-toolbar-row>
      <a md-button>Attendance</a>
    </md-toolbar-row>
  </md-toolbar>
</div>

<div class="col-md-10">
  <router-outlet name="myteam_outlet"></router-outlet>
</div>

在上面的 HTML 中，您可以看到我有一个命名 socket 。这里我想在 <a md-button [routerLink]="[{ outlets: { myteam_outlet: ['members'] } }]"[routerLinkActive]="['router-link-active']">Members Listing</a> 时加载 MemberListingComponent被点击，但不断出现错误。

Answer 1

等待答案并在谷歌上搜索后。我已经解决了我的问题。

我正在使用子 socket 并尝试加载子组件，但路由与路由器 socket 不在同一级别。路由应该是:

RouterModule.forChild([
  {
    path: '', component: MyTeamComponent,
    children: [
      { path: 'members', component: MemberListingComponent }
    ]
  }
])

(route和router-outlet现在在同一层)

现在，如果我执行 this.router.navigate(['myteam/members']);，它将找到我的子 socket 并在其中加载组件。也不需要命名路由器 socket 。