我在我的应用程序中定义了以下路由…
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>
<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();
}
