Angular 2 路由答案

【问题标题】：Angular 2 routingAngular 2 路由
【发布时间】：2015-06-15 18:18:20
【问题描述】：

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

【问题讨论】：

【解决方案1】：

在组件类上：

@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> 标记上。

【讨论】：

非常感谢您的回答。他们是我可以进行动态路由的一种方式。检查条件后导航到路线？您是否有任何使用最新版本的 angularjs 2.0 (..alpha.27) 进行动态路由的示例？
A route authentication example using alpha.26
是否可以从javascript触发路由。就像 angularJS 中的 $state.go() 一样。我试过 location.go in angular 2 但不工作。
仅供参考，该示例的链接已失效。
@shmck 我们可以动态提供路径、组件和路由器链接（作为角度变量）吗？如果是，那么如何？

【解决方案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);
    }
}

【讨论】：

嗨彼得，当你改变路线时，你是否发现它跳回了原来的路线？当我将路由更改为仪表板时，它会立即返回登录视图。知道为什么会这样吗？
你能展示一些你的代码吗？也许您的代码中存在一个错误，使您的路由重定向到该路由。

【解决方案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

【讨论】：