Angular：在同一个按钮上使用（单击）和 routerLink答案

【问题标题】：Angular: Using (click) and routerLink on the same ButtonAngular：在同一个按钮上使用（单击）和 routerLink
【发布时间】：2021-08-19 22:26:31
【问题描述】：

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

<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 中执行这两个操作是否会产生一些不必要的副作用？

谢谢

【问题讨论】：

我认为您的后一个想法是正确的（执行对您的服务的调用以及导航路线的单个功能）。我会提出的唯一建议是在执行导航之前等待事务成功完成，这样您就可以指出可能发生的任何错误。

标签： html angular typescript

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

在 HTML 中是这样的：

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

在你的组件中像这样：

import { Component } from '@angular/core';

@Component({...})
export class ThisComponent implements OnDestroy {


    ngOnDestroy(){
        saveToService()
    }
}

【讨论】：

【解决方案3】：

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

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


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

tap 只是执行一些操作而不影响数据流，因此非常适合路由器导航。

【讨论】：