1

我有一个带有回调函数“myCallback”的本机 Web 组件。

<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 中使用这个 webcomponent 并为其分配一个回调，但它似乎不起作用。这是我到目前为止所尝试的：

<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 is not a function”，因为它不是在窗口中定义的，而是在 Angular 中定义的。其他行永远不会被调用，也不会引发任何错误。

作为一个简单的测试，我尝试了以下，它工作正常：

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

有没有办法通过模板在 Angular 中分配回调？

更新解决方案

我犯的错误是我尝试[my-callback]而不是[myCallback]

所以解决方案如下：

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

1 回答 1

2

属性作为字符串传递给自定义元素。传递函数时，将其作为自定义元素的属性传递会更容易。

[]您可以使用Angular中的语法传递属性。

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

callbackMethod 是 ts 代码中的一个简单函数。

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

然后在自定义 web 组件中，可以直接访问属性值。

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 示例来说明这一点。

于 2018-12-07T07:48:31.710 回答