Wie mache ich zwei ts-Dateien für Eltern-Route und Kind-Route in Angular2?

Question

Ich habe versucht, eine Anwendung mit Hilfe von Angular2 Route zu entwickeln. Mein Projekt ist einfach.

Lets zuerst erklären. Auf der Startseite habe ich 2 Navigationsschaltflächen. ein. Zuhause. b. Kontaktiere uns. Also, 1. machte ich einen ts Dateinamen: - app.route.ts .. Wo ich erwähnte 2 Pfad durch

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

2. In app.component.ts Abschnitt I den folgenden Code verwendet,

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

Bis zu diesem funktioniert mein Programm perfekt. Aber danach fügte ich einige Funktionen hinzu. Ich teile meine Kontaktdaten in zwei Teile auf. ein. Mailkontakt und b. Telefonkontakt ..

Problem hatte hier erstellt. Wenn ich diese zwei Kinder von Kontakt in app.routing.ts hinzufüge, dann wird es wieder angefangen zu arbeiten. Wie,

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

     ] 
}, 

Aber ich will für diesen Routing zwei separate Datei machen ...

1. app.routing.ts, wo ich gerade Mutter erwähne Routing wie zu Hause, Kontakte und
2. Kontakt .routing.ts, wo ich Kinderrouten von Kontakten wie Mail und Telefon erwähnen möchte.

Wie kann ich diese Teile trennen ...?

Bitte schlagen Sie mir jemand .. Vielen Dank im Voraus für Ihre Aufmerksamkeit.

Voll-Code ist hier .....

app.module.ts ..

Import {contactRouting} von '../../Components/Contacts/ContactsRouting/Contacts.routing' ;

{ 
    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 ....

Vorlage: `

My Angular App

Startseite Kontakt

contact.routing.ts

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

Komponente.Kontakt .ts

Vorlage:

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

Answer 1

Ich nehme an, Sie 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 } 
]; 

dann in ihrem app.route eine Datei haben.ts müssen Sie in dieser

//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); 

Bitte halten Sie tun Geist müssen Sie URLs und Namen aktualisieren. Arbeitsdemo: http://plnkr.co/edit/qfayHJWjqItFMWuQWfcs?p=preview