路由器導航在輸出事件angular4中不起作用

Question

我有一個表組件，它發出帶有ID的事件。

`@Output() onClick: EventEmitter<any> = new EventEmitter<any>();`

`onRowClick(id: any) {
  this.onClick.emit(id);
  }`


`<a href="#" (click)="onRowClick(1)">
 </a>`

並在父組件上

`<app-datatable (onClick)="onClick($event)"><app-datatable>`

`onClick(id: any) {
  this.router.navigate(['/employee-details']);
 }`

這不會導航到員工詳細信息頁面。 但是，如果我把setTimeout它會工作。

`onClick(id: any) {
    setTimeout(() => {
        this.router.navigate(['/employee-details'])}, 100
    );
  }`

為什么會這樣？ 有什么解決辦法嗎？

Answer 1

我認為在您點擊誰觸發位置更改和您router.navigate誰更改位置之間存在沖突。

您是否可以嘗試阻止默認效果？

<a href="#" (click)="onRowClick($event, 1)">
 </a>
...
onRowClick(event: Event, id: any) {
    event.preventDefault();
    this.onClick.emit(id);
}

Answer 2

嘗試將<a href="#" (click)="onRowClick(1)"></a>更改為<a [routerLink]="[link]"></a> ，並將鏈接值傳遞給子組件作為@Input()屬性。

@Input() link

和內部的父母：

<app-datatable [link]="'/employee-details'"><app-datatable>

我認為，當您將href="#"放在錨標記上時，它將妨礙Angle的路由器。 或者，您可以通過將事件傳遞給您的方法並對其調用調用preventDefault()來停止它，但是第一種方法是更標准的方法