Angular2 Child Routesページの読み込みを停止する

Question

私はAngular2の新機能を使用しており、ルーティング、特に子ルーティングに慣れようとしています。

私はAngular2-seed projectから私のアプリケーションをベースにしており、ルーティングをセットアップしようとしています。私のルートは機能モジュール内にカプセル化されていて、私のアプリケーションには多くの機能領域があると予想しています。簡潔にするために、私はモジュールのインポートを省略しました。それは、アプリケーションの読み込み時に正しいとみなすことができます。

app.component.ts

RouteConfig([ 
    { path: '/', component: HomeComponent, as: 'Home' }, 
    { path: '/area1/...', component: Area1Component, as: 'Area1' }, 
    { path: '/area2/...', component: Area2Component, as: 'Area2' }, 
]) 

area1.component.ts

@RouteConfig([ 
    { path: '/...', component: Area1Component, as: 'Area1' }, 
    { path: '/function1', component: Function1Component, as: 'Function1' }, 
]) 

area2.component.ts

@RouteConfig([ 
    { path: '/...', component: Area2Component, as: 'Area2' }, 
    { path: '/function2', component: Function2Component, as: 'Function2' }, 
]) 

<nav> 
    <a [routerLink]="['Home']">HOME</a> 
    <a [routerLink]="['Area1', 'Function1']">A NICE FUNCTION</a> 
    <a [routerLink]="['Area2', 'Function2']">ANOTHER NICE FUNCTION</a> 
</nav> 

を次のように私のナビゲーションが定義されています

アプリケーションを正常に実行してメニュー構造をナビゲートすると問題はありませんが、子ルートのいずれかにいるときにページを更新するかブラウザの同期が同じになるようにすると、アプリケーションをホストしているタブが最大100 ％ CPU使用率。私は、コードが回転している場所を調べることができず、ルーティングの設定に欠けていた可能性のあるポインタを感謝しています。

Answer 1

• asは廃止されました。代わりに名前を使用してください。

• /...は、ルートパスの最後に、子ルートが多く存在することをルータに示します。 /...がなければ、それらはターミナルルートです。あなたの質問のコードからそれ以上の子ルートがないように見えるので、これらのルートは冗長です。

Answer 2

あなたは、ネストされたルートを使用したい場合はhereが説明するように、childrenプロパティを使用することができます。

{ 
    path: 'about', 
    component: AboutComponent, 
    children: [ 
     { path: '' }, 
     { path: 'contacts/:id', component: ContactsComponent }, 
    ] 
} 

とあなたのContactsComponentテンプレートでは、 `as`は、使用を推奨されていません<router-outlet></router-outlet>