Angular2：子コンポーネントの複数のルータコンセント

Question

scotch.ioのng2バージョンを作成中ですangular-ui-router tutorial。 私はhomeとaboutページの基本的なナビゲーションを達成することができます。 子供のためのナビゲーション、つまりlistとparagraphを作成することができます。私はaboutのページで立ち往生しています。私は約ページに移動することができますが、componentのaboutを対応するアウトレットにレンダリングできません。これは私がやっているものです：

について-routing.module.ts

export const aboutRoutes: Routes = [ 
    { 
     path: 'about', 
     component: AboutComponent, 
     children: [ 
      { 
       path: 'about', 
       outlet: 'aboutOne', 
       component: AboutOneComponent 
      }, 
      { 
       path: 'about', 
       outlet: 'aboutTwo', 
       component: AboutTwoComponent 
      } 
     ] 
    } 
]; 

<div class="jumbotron text-center"> 
    <h1>The About Page</h1> 
    <p>This page demonstrates <span class="text-danger">multiple</span> and <span class="text-danger">named</span> views.</p> 
</div> 
<div class="row"> 
    <div class="col-sm-6"> 
     <router-outlet name="aboutOne"></router-outlet> 
     <router-outlet name="aboutTwo"></router-outlet> 
    </div> 
</div> 

about.routes.ts about.component.html

import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 

import { aboutRoutes } from './about.routes'; 
@NgModule({ 
    imports: [RouterModule.forChild(aboutRoutes)], 
    exports: [RouterModule] 
}) 
export class AboutRoutingModule { 

} 

私は何が欠けているのか分かりません。 aboutページはレンダリングされていますが、子コンポーネントをレンダリングしていないため、コンソールにエラーはありません。ここには完全なgithub repoがあります。

Answer 1

<router-outlet>という名前で遊んだ後、私はそれを理解しました。私は適切な道を与えていませんでした。ユーザーがaboutページに入ると、両方のコンポーネントが対応するアウトレットにレンダリングされるはずです。両方に相対URL /パスはありません。デフォルトの子はaboutです。そこでpath:'about'をpath:''に更新しました。そしてそれは働き始めた。これが誰かに役立つことを願っています。 path問題を強調してくれてありがとう@Pradeep

about.routes.ts

export const aboutRoutes: Routes = [ 
    { 
     path: 'about', 
     component: AboutComponent, 
     children: [ 
      { 
       path: '', 
       outlet: 'aboutOne', 
       component: AboutOneComponent, 
       pathMatch: 'full' 
      }, 
      { 
       path: '', 
       outlet: 'aboutTwo', 
       component: AboutTwoComponent, 
       pathMatch: 'full' 
      } 
     ] 
    } 
]; 

。

Answer 2

誤差はおよそコンポーネントのルーティングであるあなたはコンポーネントだけでなく、親1の両方のために、パスの同じ名前を使用していたねえ@hiteshおそらく、これを変更し、この

export const aboutRoutes: Routes = [ 
    { 
     path: 'about', 
     component: AboutComponent, 
     children: [ 
      { 
       path: 'aboutOne', 
       outlet: 'aboutOne', 
       component: AboutOneComponent 
      }, 
      { 
       path: 'aboutTwo', 
       outlet: 'aboutTwo', 
       component: AboutTwoComponent 
      } 
     ] 
    } 
]; 

のようにそれを試してみてください可能性がありますすべてのケースでaboutというURLが見つかった場合には、URLを基にしてコンポーネントをロードしようとします。この場合、子コンポーネントはレンダリングできません。