Question

for clarify next part: payU is the Internet payment operator

我在将Angular应用程序与payU付款集成时遇到严重问题。我不会存储或传递信用卡数据（出于安全原因），所以我选择了小部件。

第一个问题是如何将小部件放置在代码中。文档说我应该通过以下方式放置脚本：

<script
    src="https://secure.payu.com/front/widget/js/payu-bootstrap.js"
    pay-button="#pay-button"
    merchant-pos-id="145227"
    shop-name="Nazwa sklepu"
    total-amount="9.99"
    currency-code="USD"
    success-callback="test"
    sig="250f5f53e465777b6fefb04f171a21b598ccceb2899fc9f229604ad529c69532">
</script>

您可能知道，您无法在Angular中以这种方式在代码中设置脚本，所以我决定使用一些解决方法：

    ngAfterViewInit(): void {
        this.script = document.createElement('script');
        this.script.setAttribute('src', 'https://secure.payu.com/front/widget/js/payu-bootstrap.js');
        this.script.setAttribute('pay-button', '#pay-button');
        this.script.setAttribute('merchant-pos-id', '145227');
        this.script.setAttribute('total-amount', '9.99');
        this.script.setAttribute('currency-code', 'USD');
        this.script.setAttribute('success-callback', 'test');
        this.script.setAttribute('sig', '4752ce2b163684a9c27cc0923ad46068c04da5d34329f5669ce73dcf96394558');
        this.renderer.appendChild(this.el.nativeElement, this.script);
    }

我知道这不是一个完美的解决方案（如果您知道这样做的更好方法，请在评论中让我知道。

但是主要问题是将回调函数的名称传递给success-callback属性。我在组件中准备了函数，例如：

    test(arg: any) {
        console.log(arg);
    }

但是我找不到这个名字。我正在尝试：

this.script.setAttribute('success-callback', this.test.name);

，但属性名称为空。有没有一种简单的方法可以在我的组件中获得方法的真实名称（在类型转换后）？

顺便说一句。

向index.html添加简单的js脚本并提供其名称有效，但是我需要在函数内调用service。

我正在使用Angular v7。

Answer 1

说明：

好的，让我们从解释脚本开始。由于脚本是在全局名称空间中添加的，因此成功回调将在上述代码中引用名称为“ test”的全局函数。

因此，我们需要在应用程序的全局名称空间中引用角度组件的“测试”功能，以便可以在成功回调中对其进行访问。

在您的组件中：

import {NgZone} from '@angular/core';

constructor(private zone:NgZone){
    window.callbackComponentRef = {
      testFn: (args) => {
        this.zone.run(() => { this.test(args); })
      } 
    };
}

test() {
    //Whatever code you want to run
}

然后在脚本添加代码中使用

this.script.setAttribute('success-callback', 'callbackComponentRef.testFn');

如何获得组件的方法真实名称？

1 个答案: