未注册的指定出口
未注册的指定出口
提问于 2017-01-21 16:31:47
我正试图为我的一个组件创建一个选项卡组件，所以我已经使用了名为outlet来处理这个问题。
目前，我的默认出口显示每个页面，我想在我的组件中添加一个命名的出口，问题是命名的出口看起来好像没有动态地注册到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/TabsPOC Plunkr复制此问题：http://plnkr.co/edit/P4q9yib0x9KtE15AQZAO?p=preview
回答 1
Stack Overflow用户
发布于 2017-03-08 13:47:37
将应用程序组件更改为：
@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'
}
}记住删除你的标签模板文件，只留下链接。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41781753
复制相关文章
相似问题
腾讯云开发者
