Angular 初始化角6形式的方形iframe的问题

我在将方形iFrame加载到表单时遇到问题。当我从导航栏导航到付款表单时，iFrame没有加载到我的输入字段中。加载它们的唯一方法是点击“刷新我的付款单”。这是我的付款。ts：

import { Component, OnInit, Input, EventEmitter, AfterViewInit } from '@angular/core';
import {AppService} from '../app.service';

declare var SqPaymentForm: any;

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

  constructor(private appService: AppService) { }
  paymentForm: any ;
  ngOnInit() {
   this.squarePaymentFunction();
  }
  ngAfterViewInit(): void  {}

  squarePaymentFunction() {
    let vm;
    vm = this;
    // this.calculatePayment();
    const applicationId = '********';

    // Set the location ID
    const locationId = '*********';
    this.paymentForm = new SqPaymentForm({

      // Initialize the payment form elements
      applicationId: applicationId,
      locationId: locationId,
      inputClass: 'sq-input',

      // Customize the CSS for SqPaymentForm iframe elements
      inputStyles: [{
        fontSize: '.9em'
      }],

      // Initialize the credit card placeholders
      cardNumber: {
        elementId: 'sq-card-number',
        placeholder: '•••• •••• •••• ••••'
      },
      cvv: {
        elementId: 'sq-cvv',
        placeholder: 'CVV'
      },
      expirationDate: {
        elementId: 'sq-expiration-date',
        placeholder: 'MM/YY'
      },
      postalCode: {
        elementId: 'sq-postal-code'
      },
      // SqPaymentForm callback functions
      callbacks: {

        /*
         * callback function: methodsSupported
         * Triggered when: the page is loaded.
         */
        methodsSupported: function (methods) {
        },

        /*
         * callback function: createPaymentRequest
         * Triggered when: a digital wallet payment button is clicked.
         */
        createPaymentRequest: function () {

          let paymentRequestJson;
          return paymentRequestJson;

        },

        /*
         * callback function: cardNonceResponseReceived
         * Triggered when: SqPaymentForm completes a card nonce request
         */
        cardNonceResponseReceived: function (errors, nonce, cardData)  {
          if (errors) {
            // Log errors from nonce generation to the Javascript console
            console.log('Encountered errors:');
            errors.forEach(function(error) {
              console.log('  ' + error.message);
            });

            return;
          }

          alert('Nonce received: ' + nonce); /* FOR TESTING ONLY */

          // Assign the nonce value to the hidden form field
          // document.getElementById('card-nonce').value = nonce;
          // needs to be extracted from the
          (<HTMLInputElement>document.getElementById('card-nonce')).value = nonce; // casting so .value will work

          let amount = (<HTMLInputElement>document.getElementById('amountToPay')).value;

          // POST the nonce form to the payment processing page
          // (<HTMLFormElement>document.getElementById('nonce-form')).submit();
          vm.sendSqPayment({'nonce': nonce, 'amountToPay': amount});
        },

        /*
         * callback function: unsupportedBrowserDetected
         * Triggered when: the page loads and an unsupported browser is detected
         */
        unsupportedBrowserDetected: function() {
          alert('Your browser seems to be unsupported for card processing. Please try a different browser.');
        },

        /*
         * callback function: inputEventReceived
         * Triggered when: visitors interact with SqPaymentForm iframe elements.
         */
        inputEventReceived: function(inputEvent) {
          switch (inputEvent.eventType) {
            case 'focusClassAdded':
              /* HANDLE AS DESIRED */
              break;
            case 'focusClassRemoved':
              /* HANDLE AS DESIRED */
              break;
            case 'errorClassAdded':
              document.getElementById('error').innerHTML = 'Please fix card information errors before continuing.';
              /* HANDLE AS DESIRED */
              break;
            case 'errorClassRemoved':
              document.getElementById('error').style.display = 'none';
              /* HANDLE AS DESIRED */
              break;
            case 'cardBrandChanged':
              /* HANDLE AS DESIRED */
              break;
            case 'postalCodeChanged':
              /* HANDLE AS DESIRED */
              break;
          }
        },

        /*
         * callback function: paymentFormLoaded
         * Triggered when: SqPaymentForm is fully loaded
         */
        paymentFormLoaded: function() {
          /* HANDLE AS DESIRED */
          console.log('The form loaded!');
        }
      }
    });
  }

  requestCardNonce(event) {


    // Request a nonce from the SqPaymentForm object
    this.paymentForm.requestCardNonce();
  }
  sendSqPayment(data) {
    this.appService.sendPayment(data).subscribe((data) => {
        if (data.success) {
          console.log('Data success');
        }
        // console.log('data', data);
      },
    );
  }
}

从'@angular/core'导入{Component，OnInit，Input，EventEmitter，AfterViewInit}；
从“../app.service”导入{AppService}；
申报var SqPaymentForm：任何；
@组成部分({
选择器：'应用程序付款'，
templateUrl:“./payment.component.html”，
样式URL:['./payment.component.css']
})
导出类PaymentComponent实现OnInit，AfterViewInit{
构造函数（私有appService:appService）{}
付款方式：任何；
恩戈尼尼特（）{
这个.squarePaymentFunction（）；
}
ngAfterViewInit（）：void{}
squarePaymentFunction（）{
让虚拟机；
vm=这个；
//这是calculatePayment（）；
常量applicationId='********'；
//设置位置ID
const locationId='********'；
this.paymentForm=新的SqPaymentForm({
//初始化付款表单元素
applicationId:applicationId，
locationId:locationId，
inputClass:“sq输入”，
//自定义SqPaymentForm iframe元素的CSS
输入样式：[{
字体大小：'.9em'
}],
//初始化信用卡占位符
卡号：{
elementId:“sq卡号”，
占位符：“•••••”
},
cvv：{
elementId:'sq cvv'，
占位符：“CVV”
},
截止日期：{
elementId:“sq到期日期”，
占位符：“MM/YY”
},
后代码：{
elementId:“sq邮政编码”
},
//SqPaymentForm回调函数
回调：{
/*
*回调函数：支持方法
*加载页面时触发。
*/
支持的方法：函数（方法）{
},
/*
*回调函数：createPaymentRequest
*点击数字钱包支付按钮时触发。
*/
createPaymentRequest:函数（）{
让paymentRequestJson；
返回paymentRequestJson；
},
/*
*回调函数：CardNonCresponseReceived
*当：SqPaymentForm完成卡的临时请求时触发
*/
CardNoneResponseReceived:函数（错误、nonce、cardData）{
如果（错误）{
//将nonce生成的错误记录到Javascript控制台
log（'遇到错误：'）；
errors.forEach（函数（错误）{
控制台日志（“”+错误消息）；
});
返回；
}
警报（'Nonce received:'+Nonce）；/*仅用于测试*/
//将nonce值指定给隐藏的表单字段
//document.getElementById（'card-nonce'）。value=nonce；
//需要从
（document.getElementById（'card-nonce'））.value=nonce；//强制转换so.value将起作用
let amount=（document.getElementById（'amountToPay'））.value；
//将临时表单过帐到付款处理页面
//（document.getElementById（'nonce-form'））.submit（）；
sendSqPayment（{'nonce'：nonce，'amountToPay'：amount}）；
},
/*
*回调函数：检测到UnsupportedBrowser
*当：页面加载且检测到不受支持的浏览器时触发
*/
检测到unsupportedBrowserDetected:函数（）{
警报（'您的浏览器似乎不支持卡片处理。请尝试其他浏览器'）；
},
/*
*回调函数：inputEventReceived
*当：访问者与SqPaymentForm iframe元素交互时触发。
*/
inputEventReceived:函数（inputEvent）{
开关（inputEvent.eventType）{
案例“focusClassAdded”：
/*按需处理*/
打破
案例“focusClassRemoved”：
/*按需处理*/
打破
案例“errorClassAdded”：
document.getElementById（'error'）。innerHTML='请在继续之前修复卡信息错误'；
/*按需处理*/
打破
案例“errorClassRemoved”：
document.getElementById（'error'）.style.display='none'；
/*按需处理*/
打破
案例“cardBrandChanged”：
/*按需处理*/
打破
“邮资变更”一案：
/*按需处理*/
打破
}
},
/*
*回调函数：paymentFormLoaded
*当：SqPaymentForm已完全加载时触发
*/
paymentFormLoaded:函数（）{
/*按需处理*/
log（'加载的表单！'）；
}
}
});
}
requestCardNonce（事件）{
//从SqPaymentForm对象请求一个nonce
此.paymentForm.requestCardNonce（）为；
}
付款（数据）{
this.appService.sendPayment（数据）.subscribe（（数据）=>{
if（data.success）{
console.log（“数据成功”）；
}
//console.log（'data'，data）；
},
);
}
}

---

我在app.routing.ts中使用Routes和RouterModlue设置了路由，首先将autobuild设置为false

squarePaymentFunction() {
    let vm;
    vm = this;

    this.paymentForm = new SqPaymentForm({

      // Initialize the payment form elements
      applicationId: applicationId,
      locationId: locationId,
      inputClass: 'sq-input',
      autoBuild : false,
)};

然后我创建了一个局部变量并设置为false

formLoaded: boolean =  false;

接下来，我创建了一个函数来检查表单是否已生成并将其添加到ngOnInit（）：

最后一步是将它添加到输入字段中

<input id="property_name" formControlName="property_name"  (focus)="loadPaymentForm()" (input)="checkInputError()" type="text" class="form-control" name="property_name" required/>

---

这不是最好的方法，但它正在发挥作用。

“加载它们的唯一方法是点击“刷新我的付款表单”。在我看来，您应该使用

SqPaymentForm

的

autoBuild

参数。能否尝试添加

autoBuild:false

，以及

<input id="property_name" formControlName="property_name"  (focus)="loadPaymentForm()" (input)="checkInputError()" type="text" class="form-control" name="property_name" required/>