命名的插座没有注册

我想为我的组件之一创建一个标签组件，所以我用了命名插座来处理这个。命名的插座没有注册

目前，我有我的默认插座，显示每个页面，我想添加一个命名插座内部我的组件之一，问题是它看起来像名称插座没有动态注册到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>

标签，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>

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

Github上回购重现此问题：https://github.com/Sakuto/TabsPOC Plunkr重现此问题：http://plnkr.co/edit/P4q9yib0x9KtE15AQZAO?p=preview

更新角度问题产生https://github.com/angular/angular/issues/14051

来源

2017-01-21 Sakuto

该问题应该直接包含相关的代码，而不仅仅是一些外部资源的链接。 –

完成，显示有用的代码。 – Sakuto

如何改变你的应用程序组件：

@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' 
    } 
}

请记住删除您的标签页模板文件，只留下链接。

来源

2017-03-08 13:47:37

命名的插座没有注册

回答

相关问题