Angular 2条路由

Question

我在网上搜索了一个更改浏览器 url 的 angular2 路由器的示例。当我们更改不同的路由时，所有示例都不会更改浏览器 url。你能给我一个 ES6 中的小例子来证明这一点吗？

Answer 1

在组件上 class:

@RouteConfig([
  { path: '/',          name: 'home',      component: Home },
  { path: '/dashboard', name: 'dashboard', component: Dashboard },
  { path: '/todo',      name: 'todo',      component: Todo }
])
export class App {}

name 不是必需的，但可用于提供别名。

在模板中：

<a router-link="home">Home</a>

请注意 router-link 必须存在于 <a> 标签上。

Answer 2

在深入研究 Angular2 源代码后，我找到了一种让动态路由起作用的方法。让我们看看这个例子：

import {Router} from 'angular2/router';
@Component({
    ...
})
export class SampleComponent {
    public router: Router;

    constructor(router: Router) {
        this.router = router;
    }

    goTo(uri) {
        this.router.navigateByUrl(uri);
    }
}

Answer 3

在你的单元测试中你会做类似..

spyOn(instance.router, 'navigateByUrl'); // first thing inside it block

expect(instance.router.navigateByUrl).toHaveBeenCalledWith(uri); // near end of it block when you would have expected the navigation to have happened

Angular 2条路由

Angular 2 routing

angular2-router

angular