angular – 错误：无法找到插入myteam_outlet以加载’MemberListingComponent’

2023年5月13日 236次阅读

我已经尝试了所有解决方案,但没有运气.我的情况有所不同.

在主要组件中,我有一个装载子模块的插座.我在子模块中定义了子路由：

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

默认路径{path：”,组件：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中你可以看到我有一个名为outlet.这里我想在< a md-button [routerLink] =“[{outlets：{myteam_outlet：[‘members’]}}]”[routerLinkActive] =“[‘router-link-active’]”>时加载MemberListingComponent ;会员列表< / a>单击,但不断收到错误.

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

我正在使用子插座并尝试加载子组件,但路由与路由器插座不在同一级别.路由应该是：

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

(路由和路由器出口现在在同一水平)

现在它会找到我的子插座并在其中加载组件如果我这样做.router.navigate([‘myteam / members’]);.也不需要命名路由器插座.

点赞