Установить обратный вызов нативного веб-компонента из Angular

Question

У меня есть собственный веб-компонент с функцией обратного вызова "myCallback".

<script>
    class MyComponent extends HTMLElement {
        constructor() {
            super();
            this.myCallback = this.getAttribute("my-callback");
        }

        connectedCallback() {
            this.innerHTML = "MyComponent";

            const me = this;
            setTimeout(function () {
                const cb = me.myCallback;
                if (typeof cb === "string") {
                    new Function(cb).call(window);
                } else if (typeof cb === "function") {
                    cb.call(window);
                } else {
                    console.log("not a function: " + cb);
                }
            }, 1000);
        }

    }

    customElements.define("my-component", MyComponent);
</script>

Я хочу использовать этот веб-компонент в Angular и назначить ему обратный вызов, но он, похоже, не работает. Это то, что я пробовал до сих пор:

<my-component my-callback="angularCallback()"></my-component>
<my-component my-callback="{{angularCallback}}"></my-component>
<my-component [my-callback]="angularCallback"></my-component>
<my-component [my-callback]="angularCallback()"></my-component>
<my-component (my-callback)="angularCallback()"></my-component>

В первой строке выше выдается ошибка "angularCallback не является функцией", потому что она определяется не в окне, а в Angular. Другие строки никогда не вызываются и не выдают никакой ошибки.

В качестве простого теста я попробовал следующее, и он отлично работает:

<my-component my-callback="console.log('test-callback');"></my-component>

Есть ли способ назначить обратный вызов в Angular через шаблон?

Обновление с решением

Ошибка, которую я сделал, заключалась в том, что я пытался [my-callback] вместо [myCallback]

Таким образом, решение заключается в следующем:

<my-component [myCallback]="angularCallback"></my-component>

Answer 1

Атрибуты передаются пользовательскому элементу в виде строки. При передаче функции будет проще передать ее как свойство пользовательского элемента.

Вы можете передать собственность, используя [] Синтаксис в Angular.

<my-component [mycallback]="callbackMethod"></my-component>

CallbackMethod - простая функция в коде ts.

callbackMethod = () => console.log('callback method called');

Затем в пользовательском веб-компоненте вы можете напрямую получить доступ к значению свойства.

setTimeout(function () {
    // directly access the callback property on the component
    const cb = this.mycallback;

    if (typeof cb === "string") {
        new Function(cb).call(window);
    } else if (typeof cb === "function") {
        cb.call(window);
    } else {
        console.log("not a function: " + cb);
    }
}, 1000);

Я создал пример StackBlitz, чтобы проиллюстрировать это.