Angular 2路由器在URL中附加问号

Question

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

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

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

任何人都可以告诉我为什么?符号会出现在网址中。理想情况下，它应该为路由"/employeeDetails"加载相应的组件而不刷新页面。我还尝试了没有/的代码，但没有帮助。

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

任何帮助都将不胜感激。

Answer 1

原因可能是缺少action="/formsubmit"。当Chrome尝试发送没有它的GET请求时，它会将?附加到当前网址。

请尝试以下提交动作：

onSubmitAction(event){
    event.preventDefault()
}

• Angular路由器不是问题

希望有所帮助：）

Answer 2

要在URL中使用带有角度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 3

确保在组件构造函数中注入_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 4

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

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

Answer 5

先前的答案都没有给出正确的答案，即使其中的某些方法起作用了！但是所有人都贴上了补丁，却没有对造成这种情况的原因采取行动。

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

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