Как я могу получить реальное имя метода компонента? - PullRequest
Новая
       24

Как я могу получить реальное имя метода компонента?

0 голосов
/ 26 апреля 2019

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);

но имя свойства пусто. Есть ли простой способ получить реальное имя метода (после перевода typescipt) в моем компоненте?

КСТАТИ.

Добавление простого js-скрипта в index.html и предоставление его имени работает, но мне нужно вызвать сервис внутри моей функции.

Я использую Angular v7.

1 Ответ

0 голосов
/ 26 апреля 2019

Объяснение:

Хорошо, давайте начнем с объяснения сценария.Поскольку сценарий добавляется в глобальное пространство имен, обратный вызов успеха относится к глобальной функции с именем test в приведенном выше коде.

Итак, нам нужна ссылка на функцию 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');
...