Tengo un botón que redirige a una nueva página y al mismo tiempo debería guardar datos en un Servicio. Como lo uso ahora se ve así:
<button [disabled]="!isValid" (click)="saveToService()" routerLink="/link">Next</button>
Ahora me pregunto si esta es la mejor práctica. Parece que el botón html está algo abarrotado por tantas funcionalidades separadas. La alternativa obvia es mover la navegación del enrutador a una función que haga ambas cosas, como en:
<button [disabled]="!isValid" (click)="saveAndNavigate()">Next</button> y en ts:
private saveAndNavigate():void { this.service.setData(data); this.router.navigate(['/link]); }
¿Hay una manera 'correcta' de hacer esto? ¿Hay algunos efectos secundarios no deseados al realizar ambas acciones en html?
Gracias
Le sugiero que lo haga en las promesas del enrutador. Así que puedes:
this.router.navigate(['/link]).then(() => { this.service.setData(data); });Implementaría la función OnDestroy en su componente, para que pueda almacenar los datos cuando finalice el componente.
Algo como esto en HTML:
<button [disabled]="!isValid" routerLink="/link">Next</button>Y así en tu componente:
import { Component } from '@angular/core'; @Component({...}) export class ThisComponent implements OnDestroy { ngOnDestroy(){ saveToService() } }Si su navegación se realiza independientemente del resultado de la llamada de servicio, entonces la respuesta de Fatih funcionaría bien.
Por otro lado, y lo que normalmente he visto, es que la navegación de la página solo debe ocurrir después de completar (con éxito) la solicitud. Si este es el caso, eliminaría la directiva routerLink de su botón y mantendría la función (click) . Esa función podría verse así:
// if your service is making an Http request public saveToService() { this.service.saveStuff().pipe( tap(() => this.router.navigate(['/somewhere'])) ) }tap simplemente realiza alguna acción sin afectar el flujo de datos, por lo que es perfecto para la navegación del enrutador.