Angular 2路由器在路由时刷新页面

发布时间：2020-12-17 17:21:42 所属栏目：安全来源：网络整理

导读：我正在尝试在学习Angular 2的同时设置一条简单的路线,每当我点击一个链接时,浏览器就会被路由到新的路线,但浏览器会重新请求所有资源(不像单页应用程序那样). 我的索引文件, !--... . . various scripts and styles . . . . . ---script src="node_modules/a

我正在尝试在学习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="javascript:void()" class="outlink" data="/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{}

我做错了什么？ Angular版本是2.0.0-beta.7.

谢谢您的任何见解.

解决方法

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

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

由于您已将ROUTER_DIRECTIVES指定到组件的directives属性中,因此该指令可直接使用

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!