Angular2 Router Laden Header und Fußzeile jedes Mal

Question

Ich benutze Angular2 Beta und erstellt eine Webseite mit 3 Links/Komponenten.

Ich habe separat eine Kopfzeile, mainnav und Fußzeile Komponente erstellt, die nur einmal laden sollte?

Das Problem ist, dass wenn ich zu den verschiedenen Links navigiere die gesamte Seite neu zu laden scheint. Ich möchte nicht, dass die Header, MainNav und Footer jedes Mal neu laden, es ist zu langsam.

Sollte Angular2 nicht einfach den Inhalt laden und nicht alles neu laden?

Was ich bin Ich tue nicht falsch?

Hier ist der Code:

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 { 

} 

Die Links:

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

Ich weiß, im nicht mit [Router] ... das einen Unterschied in der Belastung machen würde?

Answer 1

sollten Sie verwenden routerLink statt

<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

jetzt kann Router geschrieben werden:

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

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