Angular2が間違ったRouterOutletを使用しています

Question

これを動作させることはできません。私はルータのアウトレットと一緒にmdのタブを使用して、私はすべてのデータを同時にプリロードしないようにしています。代わりに、必要なときにロードするだけです。

AdminComponent.html

<a [routerLink]="['kategorier']"><h1>till kategorier</h1></a> 
<md-tab-group (focusChange)="changeTab($event)"> 
    <ng-container *ngFor="let tab of adminPages"> 
     <md-tab label="{{tab.title}}"> 
     </md-tab> 
    </ng-container> 

</md-tab-group> 
<router-outlet name="admin-panel"></router-outlet> 

AdminComponent.ts（changetab機能）

public changeTab(e) { 
    console.log("link: "+this.adminPages[e.index].link); 
    this.router.navigate([this.adminPages[e.index].link]); 
    // this.router.navigate(['account', {outlets: {'admin': [this.adminPages[e.index].link]}}]); 
    // this.router.navigate([{ outlets: { admin: [this.adminPages[e.index].link] } }]); 
} 

アプリ-routing.module.ts

const routes: Routes = [ 
    { 
     path: 'account', 
     component: AccountComponent, 
     pathMatch: 'full', 
     children: [ 
     // { path: '', redirectTo: 'kategorier', pathMatch: 'full' }, 
     { path: 'ordrar', component: OrderManagerComponent, outlet: 'admin-panel' }, 
     { path: 'kategorier', component: CategoryManagerComponent, outlet: 'admin-panel' }, 
     { path: 'produkter', component: ProductManagerComponent, outlet: 'admin-panel' }, 
     { path: 'anvandare', component: UserManagerComponent, outlet: 'admin-panel' } 
     ] 
    }, 
    { 
     path: '**', 
     redirectTo: '/', 
     pathMatch: 'full' 

    } 
]; 

の関連部分私が行方不明です場合関連情報は、私に教えてください。

Answer 1

私はこの質問を作成したときに間違いを犯しました。私はapp-routing.module.tsファイルをすべて投稿しなかったので、質問をもっと短くするためにいくつかの部分を削除しましたが、それは大きな間違いでした。問題はそのファイル内にあるためです。

それはこのようなものだった：私はそれがルートの開始時のparamを持つことが愚かだ知っているが、私はとにかく、現時点ではそれを持って

{path: ':kategori/:produkt', component: ProductDetailComponent }, 
{path: 'register',   component: RegisterComponent }, 
{path: 'account', component: AccountComponent, children: [ 
     { path: '', redirectTo: 'ordrar', pathMatch: 'full' }, 
     { path: 'ordrar',  component: OrderManagerComponent }, 
     { path: 'kategorier', component: CategoryManagerComponent }, 
     { path: 'produkter', component: ProductManagerComponent }, 
     { path: 'anvandare', component: UserManagerComponent } 
    ] 
}, 

を。しかし、これが私の問題の原因です。私は、「アカウント/ kategorier」たとえば、アカウントの子どもたちに行ったとき、実際にマッチしたルートは、以下の通りであった：

{path: ':kategori/:produkt', component: ProductDetailComponent }, 

だから私の一時的な解決策は、ルートでのparamsとパスを下に移動しました優先度を下げるにはそれは悪い解決策ですが、それは今のところ行います。それは次のようになります。

{path: 'register',   component: RegisterComponent }, 
{path: 'account', component: AccountComponent, children: [ 
     { path: '', redirectTo: 'ordrar', pathMatch: 'full' }, 
     { path: 'ordrar',  component: OrderManagerComponent }, 
     { path: 'kategorier', component: CategoryManagerComponent }, 
     { path: 'produkter', component: ProductManagerComponent }, 
     { path: 'anvandare', component: UserManagerComponent } 
    ] 
}, 
{path: ':kategori/:produkt', component: ProductDetailComponent }, 

私が推奨される解決策はそれをこのような何かをすることですbeileveが：

{path: 'kategorier/:kategori/:produkt', component: ProductDetailComponent }, 
{path: 'register',   component: RegisterComponent }, 
{path: 'account', component: AccountComponent, children: [ 
     { path: '', redirectTo: 'ordrar', pathMatch: 'full' }, 
     { path: 'ordrar',  component: OrderManagerComponent }, 
     { path: 'kategorier', component: CategoryManagerComponent }, 
     { path: 'produkter', component: ProductManagerComponent }, 
     { path: 'anvandare', component: UserManagerComponent } 
    ] 
}, 

だからこれから学んだ教訓が質問されています。あなたが質問をするときには、潜在的に関連性のある情報を忘れないようにしてください。