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

我认为点击触发位置更改的人与路由器之间存在冲突。阻止谁也更改位置。

您可以尝试阻止点击的默认效果吗？

<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="#"放在锚标签上时，它会妨碍角度的路由器。或者你可以通过将事件传递给你的方法并在其上调用preventDefault()来阻止它，但第一种方式是更标准的方式

路由器导航无法在输出事件angular4中工作

2 个答案: