在Angular中将输入值从一个零部件传递到另一个零部件

Question

我有两个组件，付款信息和确认。我正在尝试使用服务(而不是父母/子女关系(将付款信息中的输入传递到确认中。现在confirmation.component.html页面将显示服务模型中的"NA"文本，但由于某种原因，该值没有更新。如有任何帮助，我们将不胜感激！

这是我的付款信息组件.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 class="inputs">
<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" class="confirm-button">Confirm Purchase</button>
</form>
</mat-card-content>
</mat-card>

这是确认的代码。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();
}
}

这是我的确认代码。component.html：

<mat-card>
<mat-card-title>CONFIRMATION</mat-card-title>
<mat-card-content>
<form>
<table>
<tr>
<td>
<mat-form-field class="inputs">
<p>{{payment.cardNumber}}</p>
</mat-form-field>
</td>
</tr>
</table>
<button mat-raised-button color="accent" routerLink="/" type="submit" class="confirm-button">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';
}

Answer 1

问题&关注点

问题：按钮未触发onSubmit功能

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

您可以放置一个未触发onSubmit函数的调试器，而是将其重定向到确认页面。

问题1：调用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 class="inputs">
<p>{{payment.cardNumber}}</p>
</mat-form-field>

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

1. 根据需要删除<mat-form-field>元素。

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

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

---

解决方案

1. 修改"付款信息"页面的提交按钮以删除routerLink属性

<button
mat-raised-button
color="accent"
type="submit"
class="confirm-button"
>
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 演示