Angular2ルータは毎回ヘッダとフッタをロードします

Question

私はAngular2ベータ版を使用しており、3つのリンク/コンポーネントでWebページを作成しました。

ヘッダー、mainnav、およびフッターコンポーネントを別々に作成しましたが、これは一度読み込むだけですか？

問題は、別のリンクに移動するとページ全体が再読み込みされているように見えることです。私はヘッダー、mainnavとフッターが毎回リロードすることを望んでいない、それは遅すぎる。

Angular2はコンテンツをロードするだけで、他のすべてをリロードする必要はありませんか？

私は間違っていませんか？

import {Component} from 'angular2/core'; 
import {RouteConfig} from 'angular2/router'; 
import {ROUTER_DIRECTIVES} from 'angular2/router'; 

import {mainnav} from './mainnav.component'; 
import {header} from './header.component'; 
import {footer} from './footer.component'; 

import {HomeComponent} from './home.component'; 
import {AboutComponent} from './about.component'; 
import {ContactComponent} from './contact.component'; 

@Component({ 
    selector: 'my-app', 
    directives: [mainnav, header, footer, ROUTER_DIRECTIVES], 
    template: ` 
     <my-mainnav></my-mainnav> 
     <my-header></my-header> 
     <router-outlet></router-outlet> 
     <my-footer></my-footer> 

    `, 
}) 

@RouteConfig([ 

    { path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true }, 
    { path: '/about', name: 'About', component: AboutComponent }, 
    { path: '/contact', name: 'Contact', component: ContactComponent } 

]) 

export class AppComponent { 

} 

リンク：

は、ここでは、コードです

<ul class="nav navbar-nav"> 
    <li class="active"><a href="home">Home</a></li> 
    <li><a href="about">About</a></li> 
    <li><a href="contact">Contact</a></li> 
</ul> 

私は[routerLink] ...それは負荷の違いになるだろう使用していないイム知っていますか？

Answer 1

あなたは今、代わりに

<ul class="nav navbar-nav"> 
    <li class="active"><a [routerLink]="['/Home']">Home</a></li> 
    <li><a [routerLink]="['/About']">About</a></li> 
    <li><a [routerLink]="['/Contact']">Contact</a></li> 
</ul> 

Answer 2

routerLinkを使用する必要があり、routerLinkを書き込むことができます。

template: ` 
    <h1>Component Router</h1> 
    <nav> 
    <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a> 
    <a routerLink="/heroes" routerLinkActive="active">Heroes</a> 
    </nav> 
    <router-outlet></router-outlet> 
`