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

debugcn 投稿 Dev

R.デイ

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

最初に説明しましょう。ホームページには、2つのナビゲーションボタンがあります。a。ホーム。b。お問い合わせ。だから、1。私はtsファイル名を作りました：-app.route.ts ..私が2つのパスについて言及したところ

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

2. app.component.tsセクションで、次のコードを使用しました。

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

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

ここで問題が発生しました。Contactのこの2つの子をapp.routing.tsに追加すると、再び機能し始めます。お気に入り、

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

      ]
},

しかし、私はこのルーティングのために2つの別々のファイルを作りたいです...

app.routing.tsここでは、自宅、連絡先、
contact.routing.tsここで、メールや電話などの連絡先の子ルーティングについて説明します。

この部分をどのように分離できますか...？

どなたかご提案ください。よろしくお願いします。

完全なコードはここにあります.....

app.module.ts.。

import {contactRouting} from '../../ 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...。

テンプレート： `

私のAngularアプリ

ホームコンタクト

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>

マジッド

私はあなたがファイルを持っていると思います 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  }
];

次に、app.route.tsでこれを行う必要があります

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

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]