Question

我正在使用Angular 2 beta并创建了一个包含3个链接/组件的网页。

我已经单独创建了一个只应加载一次的标题，mainnav和footer组件？

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

不应该只是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 {

}

链接：

 <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

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

2 个答案: