Angular2路由器每次加載頁眉和頁腳

我正在使用Angular2 beta並創建了一個包含3個鏈接/組件的網頁。Angular2路由器每次加載頁眉和頁腳

我已經分別創建了一個只能加載一次的頭文件，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] ...會，使在裝載有區別嗎？

來源

2016-04-17 Satch3000

爲什麼你認爲組件重新裝？嘗試將「console.log」添加到組件構造函數，以確保它們被重新創建。 – kemsky

或者更好的辦法是，發佈一個廣告，以便我們可以自己處理 – drewmoore

如何激活不同的路線？ –

您應該使用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>

來源

2016-04-18 07:15:54

現在，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

來源

2016-08-29 08:16:04 kuailezhish

Angular2路由器每次加載頁眉和頁腳

回答

相關問題