Angular 角度2路由器每次加载页眉和页脚

我使用Angular 2 beta版，创建了一个包含3个链接/组件的网页

我已经分别创建了页眉、mainnav和页脚组件，它们应该只加载一次

问题是，当我导航到不同的链接时，整个页面似乎会重新加载。我不希望每次都重新加载页眉、主导航和页脚，它太慢了

Angular不应该只加载内容，而不必重新加载其他内容吗

我做错了什么

代码如下：

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 {

}

从'angular2/core'导入{Component}；
从“angular2/router”导入{RouteConfig}；
从“angular2/ROUTER”导入{ROUTER_指令}；
从“./mainnav.component”导入{mainnav}；
从“./header.component”导入{header}；
从“./footer.component”导入{footer}；
从“./home.component”导入{HomeComponent}；
从“./about.component”导入{AboutComponent}；
从“./contact.component”导入{ContactComponent}；
@组成部分({
选择器：“我的应用程序”，
指令：[主导航、页眉、页脚、路由器指令]，
模板：`
`,
})
@线路图([
{路径：'/home'，名称：'home'，组件：HomeComponent，useAsDefault:true}，
{路径：'/about'，名称：'about'，组件：AboutComponent}，
{路径：'/contact'，名称：'contact'，组件：ContactComponent}
])
导出类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]，这会影响加载吗？

您应该使用

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>

主页
关于
接触

您应该改用

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>

主页
关于
接触

现在，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>
`

模板：`
组件路由器
现在，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>
`

模板：`
组件路由器
您认为为什么要重新加载组件？尝试将
console.log
添加到组件构造函数，以确保它们被重新创建。或者更好的是，发布一个plunk，以便我们可以自己使用它。如何激活不同的路由？添加上面的链接为什么您认为组件会被重新加载？尝试向组件构造函数添加
console.log
，以确保它们被重新创建。或者更好的是，发布一个plunk，以便我们可以自己使用它。如何激活不同的路由？添加了上面的链接