Angular2路由器在URL中附上问号

Question

我的 Angular 4 项目遇到了一个奇怪的问题。我正在尝试通过代码导航到路径（单击按钮）。我正在使用如下 router.navigate() 方法来完成工作 --

this._router.navigate(["/employeeDetails", selectedEmployee.EmployeeId]);

其中 selectedEmployee.EmployeeId 是一个数字。导航发生了，但我在 URL 中遇到了一件非常奇怪的事情。最初 URL 显示如下 -- http://localhost:4200/?employeeDetails/170 然后 ? 符号从 URL 中消失，所需的页面被加载。

谁能告诉我为什么 ? 标志出现在 URL 中。理想情况下，它应该在不刷新页面的情况下加载路由 "/employeeDetails" 的相应组件。我也尝试了没有 / 的代码如下但没有帮助。

this._router.navigate(["/employeeDetails", selectedEmployee.EmployeeId]);

如有任何帮助，我们将不胜感激。

Answer 1

确保你在你的组件构造函数中注入 _router: Router 像这样：

constructor(private _router: Router) {}

改变这个：

this._router.navigate(["/employeeDetails", selectedEmployee.EmployeeId]);

对此：

this._router.navigate(['/employeeDetails', selectedEmployee.EmployeeId]);

或者这个：

this._router.navigate(['/employeeDetails/' + selectedEmployee.EmployeeId]);

在你的路由文件中你应该有这样的东西：

const routes: Routes = [
  ...
  { path: 'employeeDetails/:id', component: YourComponent },
  ...
];

Answer 2

原因可能是缺失 action="/formsubmit"。当 Chrome 尝试在没有它的情况下发送 GET 请求时，它会将 ? 附加到当前 URL.

尝试以下提交操作：

onSubmitAction(event){
    event.preventDefault()
}

这不是 Angular 路由器的问题

希望对您有所帮助:)

Answer 3

要在 URL 中使用 angular 2 (4,5,6) 为参数添加问号：

this.router.navigate(['/companie'], { queryParams: { type: 'firstRegister' }});

您将获得：

https://myurl/#/companie?type=firstRegister

经典参数为：

this.router.navigate(['/companie', { type: 'firstRegister' }])

您将获得：

https://myurl/#/companie;type=firstRegister

Answer 4

我遇到了同样的问题。通过将此操作添加到我的表单标签来解决它：

<form action="javascript:void(0)"

Answer 5

None 之前的答案给出了正确的答案，甚至认为其中一些可行！但是所有打补丁都没有对我们的事件起因采取行动。

解决方案是将type="button"设置为按钮元素，因为默认情况下表单标识按钮为 type="submit" 如果未指定并触发提交操作。

但是谢谢，因为答案的组合帮助我找到了真正的原因！

Angular2路由器在URL中附上问号

Angular 2 router attaches question mark in URL

angular-routing

angular