Angular:在同一个Button上使用(click)和routerLink

Question

我有一个按钮，重定向到一个新的页面，同时应该保存数据到一个服务。当我现在使用它时，它看起来像这样:

<button [disabled]="!isValid" (click)="saveToService()" routerLink="/link">Next</button>

现在我想知道这是否是最佳实践。感觉html按钮被这么多独立的功能弄得有点乱。显而易见的替代方法是将路由器导航移到一个同时做这两件事的函数中，如:

<button [disabled]="!isValid" (click)="saveAndNavigate()">Next</button>在ts:

private saveAndNavigate():void { this.service.setData(data); this.router.navigate(['/link]); }

有"正确"的方法来做这件事吗?在html中做这两个动作是否有一些不必要的副作用?

感谢

Answer 1

我建议你在路由器承诺中这样做。所以你可以:

this.router.navigate(['/link]).then(() => {
this.service.setData(data);
});

Answer 2

我会在你的组件中实现OnDestroy函数，这样你就可以在组件终止时存储数据。

在HTML中:

<button [disabled]="!isValid" routerLink="/link">Next</button>

在你的组件中像这样:

import { Component } from '@angular/core';
@Component({...})
export class ThisComponent implements OnDestroy {

ngOnDestroy(){
saveToService()
}
}

Answer 3

如果不管服务调用的结果如何都执行导航，那么Fatih的答案就可以正常工作。

另一方面，我通常看到的是，页面导航应该只在(成功)完成请求之后发生。如果是这种情况，我会从按钮中删除routerLink指令并保留(click)功能。这个函数可以像这样:

// if your service is making an Http request
public saveToService() {
this.service.saveStuff().pipe(
tap(() => this.router.navigate(['/somewhere']))
)
}

tap只是执行一些操作而不影响数据流，因此它是路由器导航的完美选择。