Quiero mostrar taxDetailsId en la página Html de mi componente secundario. Pero cuando haga clic en el botón Enviar. Después de hacer clic en el botón Enviar, se muestra taxDetailsId en la página Html de mi componente secundario.
Componente principal
export class OnlinePaymentComponent implements OnInit { HttpClient: any; paymentForm: FormGroup = this.formBuilder.group({ taxDetailsId: ['', [Validators.required]] }); constructor( private formBuilder: FormBuilder, private router: Router, ) {} ngOnInit() {} submitForm(): void { if (!this.paymentForm.valid) { this.router.navigate(['/home/online-payment/error']); return; } } }Padre.Componente.html
<form [formGroup]="paymentForm" (ngSubmit)="submitForm()"> <label>Tax Details Id</label> <input type="text" formControlName="taxDetailsId" placeholder="Tax Details Id" /> <button>Pay Bill</button> <form>Componente hijo
export class OnlinePaymentErrorComponent implements OnInit { constructor() { } ngOnInit(): void { } }Niño.Componente.html
<div> <button [routerLink]="['/home/online-payment']" >Back Home</button> </div>Hay dos formas simples:
Usando los parámetros de consulta, puede usar router.navigate y pasar los parámetros que necesita (Id) junto con la ruta. por ejemplo: this.route.navigate(['yourroute/route', { tId: variableWithId }])
Usando Observable, cuando haga clic en el botón, use el mismo enrutador para navegar sin parámetros y pase los datos requeridos a un observable. En el enrutamiento exitoso a la página siguiente, obtenga los datos resueltos del observable.
puedes probar este patrón this.router.navigate(['/heroes', { id: heroId }]);
puede usar el decorador angular @Input() para ello.
Componente secundario
import { Component, Input } from '@angular/core'; export class ChileComponent { @Input() public taxDetailsId: number; }Componente secundario HTML
enter code here <div> {{ taxDetailsId }} <button [routerLink]="['/home/online-payment']" >Back Home</button> </div>HTML del componente principal
<app-child-component [taxDetailsId]="taxDetailsId"> </app-child-component>