Angular2で親ルートと子ルートの2つのtsファイルを作成するにはどうすればよいですか？

Question

私はAngular2ルートの助けを借りてアプリケーションを開発しようとしていました。私のプロジェクトは簡単です。

最初に説明します。ホームページには、2つのナビゲーションボタンがあります。 a。ホーム。 b。お問い合わせ。だから、 1.私は、TSファイルの名前を作った： - app.route.tsを..私は、私は、次のコードを使用app.component.tsセクションでは

{ 
    path : 'myapps/contact', component : ContactComponent, 
}, 
{ 
    path : 'myapps/home', component : HomeComponent 
}, 

2で2パスを述べた を、

<nav> 
    <a routerLink="myapps/home" routerLinkActive="active">Home</a> 
    <a routerLink="myapps/contact" routerLinkActive="active">Contact</a> 
</nav> 

これまでの私のプログラムは完全に動作しています。しかし、その後、私はいくつかの機能を追加しました。私は私の連絡先の詳細を2つの部分に分けます。 a。メール連絡先とb。電話連絡先..

問題がここで作成されました。この2人の連絡先の子をapp.routing.tsに追加すると、再び作業が開始されます。同様に、

{ 
    path : 'myapps/contact', component : ContactComponent, 
     children: [ 
     { path: '', redirectTo: 'mail', pathMatch: 'full' }, 
     { path : 'mail', component : MailComponent }, 
     { path : 'phone', component : PhoneComponent }, 

     ] 
}, 

しかし、私は家に、連絡先や

接触のようにルーティングするだけで母親を言及します

1. app.routing.ts ...このルーティングのための2つの別々のファイルを作成したいです.routing.tsここで私はメールや電話のような連絡先の子ルーティングについて言及したいと思います。

どうすればこの部品を分けることができますか？

私に誰かを示唆してください..あなたの注意のために事前に感謝します。

完全なコードが

app.module.ts .. '../../Components/Contacts/ContactsRou​​ting/Contacts.routing' から

インポート{} contactRouting .....ここにあります;

{ 
    path: '', 
    redirectTo: '/myapps/home', 
    pathMatch: 'full' 
}, 
{ 
    path : 'myapps/contact', component : ContactComponent, 
    children: [ 
     { path: '', redirectTo: 'mail', pathMatch: 'full' } 
    ] 
}, 
{ 
    path : 'myapps/home', component : HomeComponent 
}, 
{ 
    path: '**',  component: PageNotFoundComponent 
} 
]; 

app.component.ts ....

テンプレート： `

マイ角度のApp

ホーム 問い合わせ

contact.routing.ts

{ 
    path : 'mail', component : MailComponent 
}, 
{ 
    path : 'phone', component : PhoneComponent 
} 
]; 

Component.contact .TS

テンプレート：

<nav> 
      <a routerLink="mail" routerLinkActive="active">Mail</a> 
      <a routerLink="phone" routerLinkActive="active">Phone</a> 
    </nav> 
    <router-outlet></router-outlet> 

Answer 1

私はあなたがあなたのapp.routeになりましたし、ファイルcontact.routes.ts

import { Routes } from '@angular/router'; 

import { MailComponent } from './Component.mail'; 
import { PhoneComponent } from './Component.phone'; 

export const contactRoutes : Routes = [ 
    {path: '', redirectTo: 'mail', pathMatch: 'full' }, 
    {path : 'mail', component : MailComponent }, 
    {path : 'phone', component : PhoneComponent } 
]; 

を持っていると仮定します。あなたはこれを行う必要があります

//keep everytning esle and add this following line 
import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

import { HomeComponent } from './Component.home'; 
import { ContactComponent } from './Component.contact'; 

import { contactRoutes } from './Contacts.routing'; 

const appRoutes : Routes = [ 
    { 
     path : '', component : HomeComponent 
    }, 
    { 
     path : 'contact', component : ContactComponent, 
     children: [ 

      ...contactRoutes 
     ] 
    }, 


]; 

export const routing : ModuleWithProviders = RouterModule.forRoot(appRoutes); 

URLと名前を更新する必要があることに注意してください。 作業デモ：http://plnkr.co/edit/qfayHJWjqItFMWuQWfcs?p=preview