时间戳

首页 > 解决方案 > Angular：在同一个按钮上使用（单击）和 routerLink

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

问题描述

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

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

谢谢

标签： htmlangulartypescript

解决方案

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

在 HTML 中是这样的：

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

在你的组件中像这样：

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

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


    ngOnDestroy(){
        saveToService()
    }
}

推荐阅读