如何將數據從表單傳遞到 angular 中的另一個組件

Question

我的購物車項目組件中有一個表單。 它應該用作結帳頁面。 當用戶用他們的信息填寫表單並選擇按鈕時，我需要將他們發送到確認頁面，該頁面顯示他們剛剛輸入表單的所有數據。 我無法將數據從我的購物車項目組件傳遞到我的確認組件。 我覺得我應該使用服務，但我是 angular 的新手，不確定如何執行此操作。

購物車項目 HTML：

       <form #userForm="ngForm"(ngSubmit)="onClickSubmit(userForm.value)" >
            <div class="row">
              <div class="col-md-6 mb-3">
                <label for="firstName">First name</label>
                <input type="text" ngModel name="firstName" #firstName="ngModel"class="form-control" id="firstName" placeholder="" value="" required>
                <div class="alert alert-danger"*ngIf=" firstName.touched && !firstName.valid" >
                   First Name is required.
                </div>
              </div>
              <div class="col-md-6 mb-3">
                <label for="lastName">Last name</label>
                <input type="text" ngModel name="lastName" #lastName="ngModel"class="form-control" id="lastName" placeholder="" value="" required>
                <div class="alert alert-danger"*ngIf=" lastName.touched && !lastName.valid" >
                   Last Name is required.
                </div>
              </div>
            </div>
    
      
            <div class="mb-3">
              <label for="email">Email <span class="text-muted">(Optional)</span></label>
              <input type="email" class="form-control" id="email" placeholder="you@example.com">
              <div class="invalid-feedback">
                Please enter a valid email address for shipping updates.
              </div>
            </div>
    
            <div class="mb-3">
              <label for="address">Address</label>
              <input type="text" ngModel name="address" #address="ngModel"class="form-control" id="address" placeholder="" value="" required>
              <div class="alert alert-danger"*ngIf="address.touched && !address.valid" >
                 Address is required.
              </div>
              
            </div>
    
        
            <div class="row">
              <div class="col-md-5 mb-3">
                <label for="country">Country</label>
                <select class="custom-select d-block w-100" id="country" required>
                  <option>United States</option>
                </select>
                <div class="invalid-feedback">
                  Please select a valid country.
                </div>
              </div>
              <div class="col-md-4 mb-3">
                <label for="state">State</label>
                <select class="custom-select d-block w-100" id="state" required>
                  <option value="">Choose...</option>
                  <option>California</option>
                  <option>Pennsylvania</option>
                </select>
                <div class="invalid-feedback">
                  Please provide a valid state.
                </div>
              </div>
              <div class="col-md-3 mb-3">
                <label for="zip">Zip</label>
                <input type="text" class="form-control" ngModel name="zip" #zip="ngModel" id="zip" placeholder="" required>
                <div class="alert alert-danger"*ngIf="zip.touched && !zip.valid">
                  Zip code required.
                </div>
              </div>
            </div>
      
        
      
    
            <h4 class="mb-3">Payment</h4>
    
            <div class="d-block my-3">
              <div class="custom-control custom-radio">
                <input id="credit" name="paymentMethod" type="radio" class="custom-control-input" checked required>
                <label class="custom-control-label" for="credit">Credit card</label>
              </div>
              <div class="custom-control custom-radio">
                <input id="debit" name="paymentMethod" type="radio" class="custom-control-input" required>
                <label class="custom-control-label" for="debit">Debit card</label>
              </div>
              <div class="custom-control custom-radio">
                <input id="paypal" name="paymentMethod" type="radio" class="custom-control-input" required>
                <label class="custom-control-label" for="paypal">PayPal</label>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6 mb-3">
                <label for="cc-name">Name on card</label>
                <input type="text" class="form-control" ngModel name="name" #name="ngModel" id="cc-name" placeholder="" required>
                <small class="text-muted">Full name as displayed on card</small>
                <div class="alert alert-danger"*ngIf="name.touched && !name.valid">
                  Name on card is required
                </div>
              </div>
              <div class="col-md-6 mb-3">
                <label for="cc-number">Credit card number</label>
                <input type="text" ngModel name="card" #card="ngModel" class="form-control" id="cc-number" placeholder="" required>
                <div class="alert alert-danger"*ngIf="card.touched && !card.valid">
                  Credit card number is required
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-3 mb-3">
                <label for="cc-expiration">Expiration</label>
                <input type="text" class="form-control" ngModel name="expiration" #expiration="ngModel" id="cc-expiration" placeholder="" required>
                <div class="alert alert-danger"*ngIf="expiration.touched && !expiration.valid">
                  Expiration date required
                </div>
              </div>
              <div class="col-md-3 mb-3">
                <label for="cc-cvv">CVV</label>
                <input type="text" class="form-control" ngModel name="cvv" #cvv="ngModel" id="cc-cvv" placeholder="" required>
                <div class="alert alert-danger"*ngIf="cvv.touched && !cvv.valid">
                  Security code required
                </div>
              </div>
            </div>
            <hr class="mb-4">
            <button class="btn btn-primary btn-lg btn-block" type="submit" [disabled]="userForm.invalid">Purchase Product(s)</button>
          </form>

購物車-item.ts：

import { Component, OnInit,Input } from '@angular/core';
import { Product } from '../product';
import { CardComponent } from '../card/card.component'
import { Router } from '@angular/router'

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

  @Input() product!: Product;
  namesOfDestinations:any=[];
  descriptions:any=[]
  prices:any=[];
  totalPrice:number=0;

  items:any=[];
  confirmPurchase:any=[];

constructor(public router: Router) { }

  ngOnInit(): void {
   
    // console.log(this.cart)
    // this.cartItems()
    this.getNames()
    this.getDescription()
    this.getPrice()
    this.getLocalStorageLength()
    this.getTotalPrice()
  }
onClickSubmit(data:any){
  this.router.navigate(['/confirmation'])
  this.confirmPurchase.push(data)
  console.log(this.confirmPurchase)
 }
}

確認頁面 html：

<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td align="center" style="background-color: #eeeeee;" bgcolor="#eeeeee">
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
                <tr>
                    <td align="center" valign="top" style="font-size:0; padding: 35px;" bgcolor="#F44336">
                        
                        <div style="display:inline-block; max-width:50%; min-width:100px; vertical-align:top; width:100%;" class="mobile-hide">
                            <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:300px;">
                                <tr>
                                    <td align="right" valign="top" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 400; line-height: 48px;">
                                        <table cellspacing="0" cellpadding="0" border="0" align="right">
                                          
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td align="center" style="padding: 35px 35px 20px 35px; background-color: #ffffff;" bgcolor="#ffffff">
                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
                            <tr>
                                <td align="center" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding-top: 25px;"> <img src="https://img.icons8.com/carbon-copy/100/000000/checked-checkbox.png" width="125" height="120" style="display: block; border: 0px;" /><br>
                                    <h2 style="font-size: 30px; font-weight: 800; line-height: 36px; color: #333333; margin: 0;"> Thank You For Your Order! </h2>
                                </td>
                            </tr>
                            <tr>
                                
                            </tr>
                            <tr>
                                <td align="left" style="padding-top: 20px;">
                                    <table cellspacing="0" cellpadding="0" border="0" width="100%">
                                        <tr>
                                            <td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 800; line-height: 24px; padding: 10px;"> Order Confirmation # </td>
                                            <td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 800; line-height: 24px; padding: 10px;"> 2345678 </td>
                                        </tr>
                                        <tr>
                                            <td width="75%" align="left" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;"> Name: </td>
                                            <td width="25%" align="left" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">{{data.firstName}}<br>{{data.lastName}} </td>
                                        </tr>
                                        <tr>
                                            <td width="75%" align="left" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 5px 10px;"> Email </td>
                                            <td width="25%" align="left" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 5px 10px;"> {{data.email}} </td>
                                        </tr>
                                      
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td align="left" style="padding-top: 20px;">
                                    <table cellspacing="0" cellpadding="0" border="0" width="100%">
                                        <tr>

                                            
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td align="center" height="100%" valign="top" width="100%" style="padding: 0 35px 35px 35px; background-color: #ffffff;" bgcolor="#ffffff">
                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:660px;">
                            <tr>
                                <td align="center" valign="top" style="font-size:0;">
                                    <div style="display:inline-block; max-width:50%; min-width:240px; vertical-align:top; width:100%;">
                                        <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:300px;">
                                            <tr>
                                                <td align="left" valign="top" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;">
                                                    <p style="font-weight: 800;">Delivery Address</p>
                                                    <p>{{data.address}}<br>{{data.country}}<br>{{data.state}}<br>{{data.zip}}</p>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div style="display:inline-block; max-width:50%; min-width:240px; vertical-align:top; width:100%;">
                                        <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:300px;">
                                            <tr>
                                                <td align="left" valign="top" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;">
                                                    <p style="font-weight: 800;">Credit Card Information</p>
                                                    <p>{{data.card}}<br>{{data.expiration}},{{data.cvv}}</p>
                                                    
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
               
            </table>
        </td>
    </tr>
</table>

Answer 1

onClickSubmit(data:any){
  this.router.navigate(['/confirmation'])
  this.confirmPurchase.push(data)
  console.log(this.confirmPurchase)
 }

目前您的 confirmPurchase.push(data) 行不應該被執行。 在導航到“/確認”路徑后，您正在執行此操作。

如果您需要進行任何更改，則需要在導航到另一條路徑之前進行更改。

在發送組件中，您可以使用構造函數中的服務

  constructor(private dataService: DataService) { }

  private newData = new BehaviorSubject<any>({
    name: 'K',
    mail: 'kathy@go.com',
  });

  setNewData(data: any) {
    this.newData.next(data);
  }

  getNewDataInfo() {
    return this.newData.asObservable();
  }

而在接收組件中，可以使用服務的getNewDataInfo來接收傳遞過來的數據。

返回的數據將是一個可觀察的，您可以訂閱它以接收您需要的數據。

Answer 2

你可以像下面這樣嘗試，

修改Cart-item.component中的onClickSubmit方法

onClickSubmit(data: any) {
  this.confirmPurchase.push(data)
  console.log(this.confirmPurchase)
  this.sharedService.setCartItemData(this.confirmPurchase);
  this.router.navigate(['/confirmation'])
 }

使用BehaviorSubject變量創建服務 class 以在兩個組件之間傳遞數據。

@Injectable()
export class SharedService {

    public cartItemData = new BehaviorSubject<any>([]);

    constructor() { }
    
    setCartItemData(data: any) {
       this.cartItemData.next(data);
    }

    getCartItemData() {
       return this.cartItemData.asObservable();
    }
}

確認-page.component.ts

ngOnInit() {
   this.sharedService.getCartItemData().subscribe(data => {
       console.log('form data ', data);
   });
}

StackBlitz帶有示例代碼供您參考。