如何将形式值传递给角中的另一个部件

Question

我想在我的子组件Html页面中显示taxDetailsId。但是当单击submit按钮时。单击submit按钮后，在我的子组件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;
        }
      }
    }

Parent.Component.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

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

https://angular.io/guide/router

Answer 2

您可以为它使用角@ for ()装饰器。

子组件

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

子组件

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

父组件

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

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

Answer 3

您可以使用角的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;
  }
}

当一切都说了又做了，您将看到以下内容

​

​

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

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

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