Angular2 Router load header и footer каждый раз

Question

Я использую Angular2 beta и создал веб-страницу с 3 ссылками/компонентами.

Я отдельно создал компонент заголовка, mainnav и footer, который должен загружаться только один раз?

Проблема в том, что, когда я перехожу к различным ссылкам, вся страница, похоже, перезагружается. Я не хочу, чтобы заголовок, mainnav и footer перезагружались каждый раз, это слишком медленно.

Не должно 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

Вы должны использовать routerLink вместо

<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 можно записать:

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

из https://angular.io/docs/ts/latest/guide/router.html