Angular 2路由器刷新页面，同时路由

问题描述：

我试图设置一个简单的路线，同时学习Angular 2，每当我点击一个链接，浏览器路由到新的路由，但浏览器正在请求所有的资源（不表现为单页面应用程序）。Angular 2路由器刷新页面，同时路由

我的索引文件，

<!--... . . various scripts and styles . . . . . ---> 
<script src="node_modules/angular2/bundles/angular2.dev.js"></script> 
<script src="node_modules/angular2/bundles/router.dev.js"></script> 
<script src="node_modules/angular2/bundles/http.dev.js"></script> 

<script> 
    System.config({ 
    packages: {   
     app: { 
     format: 'register', 
     defaultExtension: 'js' 
     } 
    } 
    }); 
    System.import('app/main') 
     .then(null, console.error.bind(console)); 
</script> 
</head> 
<body> 
    <app></app> 
</body>

应用程序的来源，

main.ts

import {bootstrap} from 'angular2/platform/browser'; 
import {RoutingApp} from './routing/routing.app' 
import {ROUTER_PROVIDERS} from 'angular2/router' 

bootstrap(RoutingApp, [ROUTER_PROVIDERS]);

RoutingApp

import {Component} from "angular2/core" 
import {RouteComponent} from './route.component' 
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router'; 


@Component({ 
    selector : 'app', 
    template : ` 
     go to this <a href="/link">link</a> 
     <br /> 
     <router-outlet></router-outlet> 

    `, 
    directives: [ROUTER_DIRECTIVES], 
    providers: [ROUTER_PROVIDERS] 
}) 
@RouteConfig([ 
    {path: '/link', name: 'Link', component: RouteComponent} 
]) 
export class RoutingApp{ 

}

和RouteComponent

import {Component} from 'angular2/core' 

@Component({ 
    template: ` 
     hello from RouteComponent 
    ` 
}) 
export class RouteComponent{}

我做错了什么？有角版本是2.0.0-beta.7。

感谢您的任何见解。

答

您应该使用routerLink指令导航到路线：

<a [routerLink]="['Link']">link</a>

这个指令是直接可用的，因为你指定ROUTER_DIRECTIVES到组件的directives属性

Angular 2路由器刷新页面，同时路由

相关推荐