Angular2 router.navigate 重新加载应用程序
Angular2 router.navigate reloads app
我在我的应用程序中定义了以下路线...
app.components.ts
@RouteConfig([
{path:'/employees/...', name:'Employees', component:EmployeeComponent},
...
employee.component.ts
@RouteConfig([
{path:'/', name:'EmployeeList', component:EmployeeListComponent, useAsDefault: true},
{path:'/:id', name:'EmployeeDetail', component:EmployeeDetailComponent}
])
当我从 EmployeeDetailComponent 模板路由时...
<button class="btn btn-default" [routerLink]="['EmployeeList']">Close</button>
应用按预期路由到员工列表页面。
但是,当我使用 router.navigate 路由时 ...
// template
<button class="btn btn-default" (click)="save()">Save</button>
// EmployeeDetailComponent
saveEmployee() {
this._employeeServer.updateEmployee(this.employee);
this._router.navigate(['EmployeeList']);
}
应用路由员工列表(如预期),然后,片刻之后,应用完全重新加载(与预期不同)。
知道为什么 router.navigate 的行为与 routerLink 不同吗?我错过了什么?
您可以使用此指令:
@Directive({
selector: `click-stop-propagation`
events: 'stopClick($event)'
})
class ClickStopPropagation {
stopClick(event:Event) {
event.preventDefault();
event.stopPropagation();
}
}
并以这种方式应用它:
<button class="btn btn-default"
(click)="save()" click-stop-propagation>Save</button>
另一个解决方案是将事件传递给 save
方法:
<button class="btn btn-default"
(click)="save($event)" click-stop-propagation>Save</button>
并用它来停止事件传播:
save(event) {
this._employeeServer.updateEmployee(this.employee);
this._router.navigate(['EmployeeList']);
event.preventDefault();
event.stopPropagation();
}
虽然蒂埃里关于取消事件传播的回答对我有用,但我找到了另一个解决方案;
尝试在超时(任何持续时间)中包装导航
...
setTimeout(() => {
this._router.navigate(['EmployeeList']);
}, 0);
...
您是否觉得这比包含点击事件更整洁,还有待商榷。对我来说,无论如何我都想延迟导航以等待动画,这样就避免了包含多余的点击事件。
<form>
内的 <button>
可能正在尝试提交。尝试添加 <button type="button">
以防止在单击按钮时提交。
我在我的应用程序中定义了以下路线...
app.components.ts
@RouteConfig([
{path:'/employees/...', name:'Employees', component:EmployeeComponent},
...
employee.component.ts
@RouteConfig([
{path:'/', name:'EmployeeList', component:EmployeeListComponent, useAsDefault: true},
{path:'/:id', name:'EmployeeDetail', component:EmployeeDetailComponent}
])
当我从 EmployeeDetailComponent 模板路由时...
<button class="btn btn-default" [routerLink]="['EmployeeList']">Close</button>
应用按预期路由到员工列表页面。
但是,当我使用 router.navigate 路由时 ...
// template
<button class="btn btn-default" (click)="save()">Save</button>
// EmployeeDetailComponent
saveEmployee() {
this._employeeServer.updateEmployee(this.employee);
this._router.navigate(['EmployeeList']);
}
应用路由员工列表(如预期),然后,片刻之后,应用完全重新加载(与预期不同)。
知道为什么 router.navigate 的行为与 routerLink 不同吗?我错过了什么?
您可以使用此指令:
@Directive({
selector: `click-stop-propagation`
events: 'stopClick($event)'
})
class ClickStopPropagation {
stopClick(event:Event) {
event.preventDefault();
event.stopPropagation();
}
}
并以这种方式应用它:
<button class="btn btn-default"
(click)="save()" click-stop-propagation>Save</button>
另一个解决方案是将事件传递给 save
方法:
<button class="btn btn-default"
(click)="save($event)" click-stop-propagation>Save</button>
并用它来停止事件传播:
save(event) {
this._employeeServer.updateEmployee(this.employee);
this._router.navigate(['EmployeeList']);
event.preventDefault();
event.stopPropagation();
}
虽然蒂埃里关于取消事件传播的回答对我有用,但我找到了另一个解决方案;
尝试在超时(任何持续时间)中包装导航
...
setTimeout(() => {
this._router.navigate(['EmployeeList']);
}, 0);
...
您是否觉得这比包含点击事件更整洁,还有待商榷。对我来说,无论如何我都想延迟导航以等待动画,这样就避免了包含多余的点击事件。
<form>
内的 <button>
可能正在尝试提交。尝试添加 <button type="button">
以防止在单击按钮时提交。