angularjs - 路由更改时重新加载 Angular 2 应用程序

Question

我有一个具有以下路由的 Angular 2 应用程序:

@RouteConfig([
new Route({ path: '/', component: Home, name: 'Home', useAsDefault: true}),
new Route({ path: '/employees', component: ViewEmployees, name: 'ViewEmployees'}),
new Route({ path: '/employees/add', component: AddEmployee, name: 'AddEmployee'}),
])

等等。当我按以下方式更改路线时:

<a [routerLink]="['ViewEmployees']">View Employees</a>

没有问题。我可以通过主页或 AddEmployee 路由以这种方式更改路由。当我在 AddEmployee route 并尝试以这样的编程方式更改路线时，问题就出现了:

import {Router} from 'angular2/router';
...
constructor(private _router:Router) {}
...
navigate() {
    this._router.navigate(['ViewEmployees']);
}

这是行不通的。它会将我发送到 ViewEmployees View ，然后重新加载整个应用程序。如果我从 Home 组件执行相同的编程路由更改，我没有任何问题；该应用程序不会重新加载。

有没有人知道为什么它会在这种情况下这样做？我需要它工作，以便我可以保存添加的员工，然后返回到员工 ListView 。

在此先感谢您的帮助!

Answer 1

你调用navigate()来自 <form>标签？

我遇到了同样的问题。 Angular2s GitHub 上存在一些描述此行为的问题，但它们都已关闭，因为它们属于旧路由器。使用 router.navigate() 时似乎会重新加载页面在由表单内的提交按钮调用的函数内。这会导致浏览器附加一个 ?在 URL 的末尾并重新加载它。

解决方案很简单:只需return false在你的 navigate() 末尾功能。这可以防止浏览器在提交表单时使用它的默认操作。通常 Angular 会停止这种默认行为，但奇怪的是在这种情况下不会。