未注册指定插座

Question

我正在尝试为我的一个组件创建一个选项卡组件，所以我使用命名出口来处理这个问题。

目前，我有显示每个页面的默认出口，我想在我的一个组件中添加一个命名出口，问题是看起来命名出口没有动态注册到 OutletMap，这会导致错误

Error: Cannot find the outlet tabs to load 'TabsDeaComponent'

我已经尝试了很多东西，但我无法修复它，它只是不起作用。

app.component.html

<div class="menu">
  <h1>Menu de recherche</h1>
  <button (click)="search">Recherche</button>
</div>
<router-outlet></router-outlet>

tabs-routing.module.ts

const appRoutes: Routes = [
    { path: 'tabs', component: TabsComponent, pathMatch: 'full' },
    { path: 'tabsdea', component: TabsDeaComponent, outlet: 'tabs' },
    { path: 'tabsiis', component: TabsIisComponent, outlet: 'tabs' },
    { path: 'tabsother', component: TabsOtherComponent, outlet: 'tabs' }
];

Tabs.component.ts

<a [routerLink]="['', { outlets: { tabs: ['tabsdea'] } }]">Ouvrir la tab DEA</a>
<a [routerLink]="['', { outlets: { tabs: ['tabsiis'] } }]">Ouvrir la tab IIS</a>
<a [routerLink]="['', { outlets: { tabs: ['tabsother'] } }]">Ouvrir la tab Other</a>
<router-outlet name="tabs"></router-outlet>

如您所见，命名的路由器插座位于默认路由器插座内，在我看来，这会导致未注册插座的问题。

Github存储库重现此问题：https://github.com/Sakuto/TabsPOCPlunkr重现此问题：http://plnkr.co/edit/P4q9yib0x9KtE15AQZAO?p=preview

更新https://github.com/angular/angular/issues/14051 创建的角度问题

Answer 1

如何将应用程序组件更改为：

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <router-outlet></router-outlet>
      <router-outlet name="tabs"></router-outlet>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = 'Angular2'
  }
}

请记住删除选项卡模板文件，仅保留链接。