angularjs – Angular 2 App重新加载路线变化

2023年3月19日 239次阅读

我有一个带有以下路线的角度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路由并尝试以编程方式更改路由时,问题就出现了：

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

它不起作用.它将我发送到ViewEmployees视图,然后重新加载整个应用程序.如果我从Home组件执行相同的程序化路由更改,我没有任何问题;该应用程序不会重新加载.

有没有人有任何想法为什么它会在这一个案例中这样做？我需要它才能工作,以便我可以保存已添加的员工,然后返回员工列表视图.

在此先感谢您的帮助！

最佳答案 你是否在< form>中调用navigate()？标签？

我有同样的问题.在Angular2s GitHub上存在一些描述此行为的问题,但它们都已关闭,因为它们属于旧路由器.当您在窗体内的提交按钮调用的函数内使用router.navigate()时,似乎会发生页面重新加载.这可能会导致浏览器追加？在URL的末尾并重新加载它.

解决方案非常简单：只需在navigate()函数结束时返回false.这可以防止bowser在提交表单时使用它的默认操作.通常角度会停止这种默认行为,但奇怪的是不会出现这种情况.

点赞