在Angular中將輸入值從一個組件傳遞到另一個組件

我有兩個組件，付款資訊和確認。我正在嘗試使用服務（而不是父/子關系）將來自支付資訊的輸入傳遞給確認。現在，confirmation.component.html 頁面將顯示來自服務模型的“NA”文本，但該值由于某種原因沒有更新。任何幫助將不勝感激！

這是我的 payment-info.component.ts 檔案代碼：

import { Component, OnInit } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FormGroup, FormControl } from '@angular/forms';
import { PaymentInfoService } from '../services/payment-info.service';

@Component({
  selector: 'app-payment-info',
  templateUrl: './payment-info.component.html',
  styleUrls: ['./payment-info.component.css']
})
export class PaymentInfoComponent implements OnInit {

  constructor(
    private formBuilder: FormBuilder,
    private paymentInfoService: PaymentInfoService
  ) { }

  paymentInfo = this.paymentInfoService.getPaymentInfo();

  checkoutForm = this.formBuilder.nonNullable.group({
    cardNumber: ''
  })

  ngOnInit(): void {
  }

  onSubmit(): void {
    this.setData(this.checkoutForm.value.cardNumber!);
  }

  setData(cardNumber: string) {
    this.paymentInfoService.setPaymentInfo(cardNumber);
  }

}

這是我的 payment-info.component.html 代碼：

<mat-card>
  <mat-card-title>Payment Details</mat-card-title>
  <mat-card-content>
    <form [formGroup]="checkoutForm" (ngSubmit)="onSubmit()">

      <table>
        <tr>
            <td>
              <mat-form-field >
                <input matInput id="cardNumber" formControlName="cardNumber" placeholder="Card Number">
              </mat-form-field>
            </td>
          </tr>
      </table>

        <button mat-raised-button color="accent" routerLink="/confirmation" type="submit" >Confirm Purchase</button>
    </form>
  </mat-card-content>
</mat-card>

這是 Confirmation.component.ts 的代碼：

import { Component, OnInit } from '@angular/core';
import { PaymentInfoService } from '../services/payment-info.service';
import { Payment } from '../shared/models/Payment';

@Component({
  selector: 'app-confirmation',
  templateUrl: './confirmation.component.html',
  styleUrls: ['./confirmation.component.css']
})
export class ConfirmationComponent {
  payment! : Payment;
  constructor(private paymentInfoService: PaymentInfoService) {
    this.updatePaymentInfo();
  }

  ngOnInit(): void {
  }

  updatePaymentInfo(){
    this.payment = this.paymentInfoService.getPaymentInfo();
  }
}

這是我的confirmation.component.html代碼：

<mat-card>
  <mat-card-title>CONFIRMATION</mat-card-title>
<mat-card-content>
  <form>
    <table>
    <tr>
        <td>
          <mat-form-field >
            <p>{{payment.cardNumber}}</p>
        </mat-form-field>
        </td>
      </tr>
    </table>
    <button mat-raised-button color="accent" routerLink="/" type="submit" >Return to catalog</button>
  </form>
</mat-card-content>
</mat-card>

這是我的 payment-info.service.ts 代碼：

import { Injectable } from '@angular/core';
import { Payment } from '../shared/models/Payment';

@Injectable({
  providedIn: 'root'
})
export class PaymentInfoService {

  paymentInfo: Payment = new Payment();

  setPaymentInfo(cardHolder:String, cardNumber: String, cvv: String, expirationDate: String){
    this.paymentInfo.cardNumber = cardNumber;
  }
  getPaymentInfo() {
    return this.paymentInfo;
  }
}

最后，這是我用于存盤輸入的模型（Payment.ts）：

export class Payment{
    cardNumber?: String = 'NA';
}

uj5u.com熱心網友回復：

問題和擔憂

問題：按鈕沒有觸發onSubmit功能。

<button mat-raised-button color="accent" routerLink="/confirmation" type="submit" >Confirm Purchase</button>

您可以放置??一個onSubmit未觸發該功能的除錯器，而是將其重定向到確認頁面。

關注一：呼叫setPaymentInfo方式不正確

從PaymentService'setPaymentInfo方法：

setPaymentInfo(
  cardHolder: String,
  cardNumber: String,
  cvv: String,
  expirationDate: String
) {
  this.paymentInfo.cardNumber = cardNumber;
}

在PaymentInfoComponent：

setData(cardNumber: string) {
  this.paymentInfoService.setPaymentInfo(cardNumber);
}

您通過提供與方法定義不匹配的引數值來錯誤地呼叫該方法。你會得到編譯錯誤。

setPaymentInfo您必須通過正確匹配方法定義來呼叫該方法，如下所示：

setData(cardNumber: string) {
  this.paymentInfoService.setPaymentInfo('', cardNumber, '', '');
}

顧慮2：MatFormField錯誤

在確認頁面中，下面的 HTML 將根據需要收到錯誤，MatFormField其中包含MatFormFieldControl

<mat-form-field >
   <p>{{payment.cardNumber}}</p>
</mat-form-field>

因此，您需要執行以下任一操作：

1. 洗掉<mat-form-field>不需要的元素。

2. 提供MatFormFieldControl給<mat-form-field>元素。

<mat-form-field >
   <input matInput [value]="payment.cardNumber" readonly />
</mat-form-field>

解決方案

1. 修改支付資訊頁面的提交按鈕以移除該routerLink屬性。

<button
  mat-raised-button
  color="accent"
  type="submit"
  
>
  Confirm Purchase
</button>

2. 注入Router服務。

constructor(
  private formBuilder: FormBuilder,
  private paymentInfoService: PaymentInfoService,
  private router: Router
) {}

3. onSubmit通過該功能導航到確認頁面。

onSubmit(): void {
  this.setData(this.checkoutForm.value.cardNumber!);

  this.router.navigate(['/confirmation']);
}

演示@StackBlitz

標籤：有角度的网络角材料

上一篇：如何使用Rocket在API端點提供靜態HTML？

下一篇：需要一個“ImageProvider<Object>”型別的值，但得到一個“Image”型別的值