如何以角度将表单值传递给另一个组件

Question

我想在我的子组件 Html 页面中显示 taxDetailsId。 但是当点击提交按钮时。 单击提交按钮后，在我的子组件 Html 页面中显示 taxDetailsId。

父组件

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;
        }
      }
    }

父组件.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>

子组件

export class OnlinePaymentErrorComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

Child.Component.html

  <div>
    <button [routerLink]="['/home/online-payment']" >Back Home</button>
  </div>

Answer 1

有两种简单的方法：

1. 使用查询参数（没有 routerLink）。
2. 使用 Observables。

使用查询参数，您可以使用 router.navigate 并将所需的参数 (Id) 与路由一起传递。 例如：this.route.navigate(['yourroute/route', { tId: variableWithId }])

使用 Observable，当您单击按钮时，使用相同的路由器进行无参数导航并将所需的数据传递给 observable。成功路由到下一页后，从 observable 中获取已解析的数据。

Answer 2

您可以使用 Angular 的 InjectionToken 传递组件。

首先你要创建令牌：

export const ONLINE_PAYMENT_REF = new InjectionToken<OnlinePaymentComponent>('OnlinePaymentComponent');

接下来，您将令牌作为provider 添加到根组件之一，在本例中为OnlinePaymentComponent。这样，作为该组件的子级的所有内容，以及作为这些组件的子级的所有内容，等等；将引用我们在此处创建的主要父级：

@Component({
  selector: 'online-payment',
  template: `
    <online-payment-error></online-payment-error>
  `,
  providers: [
    {
      provide: ONLINE_PAYMENT_REF,
      // Forwards the instance of OnlinePaymentComponent when injected into
      // the child components constructor.
      useExisting: forwardRef(() => OnlinePaymentComponent)
    }
  ]
})
export class OnlinePaymentComponent {
  message = 'I am the Online Payment Component';
}

现在我们已经设置了主要组件，我们可以通过 OnlinePaymentComponent 的任何子对象的构造函数来访问它（无论它有多深）。

@Component({
  selector: 'online-payment-error',
  template: `
  <h2>Child</h2>
  <strong>Parent Message:</strong> {{parentMessage}}
  `
})
export class OnlinePaymentErrorComponent implements OnInit {
  parentMessage = '';

  constructor(
    @Inject(ONLINE_PAYMENT_REF) private parent: OnlinePaymentComponent
  ) {}

  ngOnInit() {
    this.parentMessage = this.parent.message;
  }
}

说完了，you will see the following:

这种方法的优点是您不必将值绑定到模板中的元素，如果这些组件具有需要引用父级的组件，您也不必绑定到这些组件。由于组件会查找层次结构，直到找到我们正在寻找的提供者的第一个实例，它们会在OnlinePaymentComponent 中找到那个。

当组件越来越深入到父组件（比如 5 层）时，这将变得非常有用，这意味着每次您必须将对模板元素的引用传递 5 次，如果它改变或变得更深，您必须更新所有模板。

使用此方法，我们不再需要更新模板以将数据从一个组件传递到另一个组件，我们只需在构造函数中请求它，如 OnlinePaymentErrorComponent 所示。

Answer 3

你可以使用角度 @Input() 装饰器。

子组件

import { Component, Input } from '@angular/core'; 
export class ChileComponent {
   @Input() public taxDetailsId: number; 
} 

子组件 HTML

enter code here
 <div>
   {{ taxDetailsId  }}
   <button [routerLink]="['/home/online-payment']" >Back Home</button>
 </div>

父组件 HTML

<app-child-component [taxDetailsId]="taxDetailsId"> </app-child-component>

https://angular.io/guide/inputs-outputs

Answer 4

你可以试试这个模式this.router.navigate(['/heroes', { id: heroId }]);

https://angular.io/guide/router