如何从第三方 api 函数调用/访问 Angular 方法？ （将 ApplePay 集成到 Angular 网站中）

Question

我是 Angular 的新手，这是我的问题：

我正在尝试使用 Angular11 将 Apple Pay 集成到网站中。 现在我已经安装了一个 npm 包，其中包含 Apple Pay JS (@types/applepayjs) 的类型定义。但是现在我无法从这个 api-function 访问我的函数。

我在 api-function 中的所有函数或变量都变为“任何”类型并显示未定义。我必须将数据发送到后端服务器以与 Apple 通信并从服务器获取返回消息。我想知道是因为范围原因还是语言原因。

我可以从第三方定义函数调用我的函数或通过构造函数访问依赖注入服务吗？有什么解决办法或建议吗？

请帮忙，非常感谢。

这是我的代码。 组件.ts

        
    export class ApplepayComponent {
        
        constructior(
            private service: ApplepayService
        ){}

        // ...........
        
        doApplePay(){
            
            const paymentRequest: ApplePayJs.ApplePayPaymentRequest = {
                countryCode: 'US',
                currencyCode: 'USD',
                supportedNetworks: ['visa', 'masterCard'],
                merchantCapabilities: ['supports3DS'],
                total: { label: 'My Store', amount: '10.00' }                
            }

            const session  = new ApplePaySession(2, paymentRequest);
            session.onvalidatemerchant = function(event) {
                const validationURL = event.validationURL;

                // here is my question
                // I want to call my service to communicate with back-end server
                this.service.validateApplePay(this.secretKey).then((result) =>{
                    const merchantValidation = result.DATA.RETURN_MSG;
                    // and if complete, call 
                    session.completeMerchantValidation(result.RETURN_MSG)
                });
                
            }
        }

        
    }

service.ts

export class ApplepayService {
        constructior(
            private service: ApiService
        ){}
        async validateApplePay(secretKey: string):Promise<any>{
            const res = await this.apiService.valdateApplepay({
                SECRET_KEY: secretKey
            }).toPromise();
            return res;
        }
}

Answer 1

这是因为您的上下文变量this 在您的api-function 中不可用。试试其中一种。

将您的function 转换为fat arrow function。

session.onvalidatemerchant = (event) => { ... }

或者，将this 传递给另一个变量

var self = this;
session.onvalidatemerchant = function(event) {
    self.(...)
}

Read more