0

我最近将我的项目从 Angular 6 更新到 Angular 11。这自然会导致一些问题。我现在正在解决的问题是我有一个 MatDialog 在单击按钮时显示。关闭此 MatDialog 后，应该会弹出另一个 MatDialog 并显示条带结帐对话框。第一次在第一个和第二个Dialog之间调用了afterClosed()，在AfterViewInit之后立即调用了onDestroy，所以什么都没有显示。第二次，条纹 MatDialog 显示得很好。想知道是否有人可以解释这种奇怪的行为。非常感谢您提供的任何帮助！

条纹 HTML：

<form #checkout="ngForm" (ngSubmit)="onSubmit(checkout)" 
class="checkout" style="width:900px;">
  <div class="form-row">
    <label for="card-info">Please Enter Your Card Info</label>
    <div id="card-info" #cardInfo></div>
    <div id="card-errors" role="alert" *ngIf="error">{{ error }}</div>
  </div>
  <button type="submit">Submit Payment</button>
</form>

打开第一个 MatDialog 的代码：

openPricingDialog(): void {
this.pricingDialogRef = this.dialog.open(PricingDialogComponent, {
  hasBackdrop: true,
  panelClass: 'app-full-bleed-dialog'
});

this.pricingDialogRef.afterClosed().subscribe( subscriptionPrice => {
  this.subscriptionPrice = subscriptionPrice;
  console.log('pricing dialog after close', subscriptionPrice);
  return this.openPaymentDialog();
});

}

打开第二个 MatDialog 的代码：

 this.paymentDialogRef = this.dialog.open(PaymentDialogComponent, {
  data: {pricing: this.subscriptionPrice, userID: this.currentUser._id},
  hasBackdrop: true,
  panelClass: 'app-full-bleed-dialog'
});

第二个对话框组件：

import {
Component,
AfterViewInit,
OnDestroy,
ViewChild,
ElementRef,
ChangeDetectorRef, Inject
} from '@angular/core';

import { NgForm } from '@angular/forms';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-payment-dialog',
  templateUrl: './payment-dialog.component.html',
  styleUrls: ['./payment-dialog.component.css']
})
export class PaymentDialogComponent implements AfterViewInit, 
OnDestroy {
  @ViewChild('cardInfo', { static: true }) cardInfo: ElementRef;

  card: any;
  cardHandler = this.onChange.bind(this);
  error: string;
  tokenID: string;

  constructor(private cd: ChangeDetectorRef,
          @Inject(MAT_DIALOG_DATA) public data: any) {}

  ngAfterViewInit() {

    const style = {
      base: {
        fontFamily: 'monospace',
        fontSmoothing: 'antialiased',
        fontSize: '19px',
        '::placeholder': {
          color: '#269'
        }
      }
    };

    this.card = elements.create('card', { style });
    this.card.mount(this.cardInfo.nativeElement);

    this.card.addEventListener('change', this.cardHandler);
  }

  ngOnDestroy() {
    this.card.removeEventListener('change', this.cardHandler);
    this.card.destroy();
  }

  onChange({ error }) {
    if (error) {
      this.error = error.message;
    } else {
      this.error = null;
    }
    this.cd.detectChanges();
  }

  async onSubmit(form: NgForm) {
    const { token, error } = await stripe.createToken(this.card, {});
    if (error) {
      console.log('Something is wrong:', error);
    } else {
      this.tokenID = token.id;
    }
  }
}
4

0 回答 0