1

我已经设置了一个应用程序，它使用 angular custom-elements 包从 angular 7 导出 Web 组件。一切正常。我可以使用元素实例从 javascript 中绑定任何东西、数组、对象、字符串：

const table = document.createElement('my-table-element');
table.someInputProp = 'Works Great';
table.otherInput = ['my', 'working', 'array'];

当我尝试绑定到文字 false 值时，问题就来了：

table.myBooleanInput = false

这不会改变组件上的任何内容 @Input myBooleanInput = true 该值永远仍然为真。无论它更改为 false 多少次。

我能够将它绑定为一个真实的值，它呈现得很好。问题仅在使用文字 false 时。

这是此问题的有效复制： https ://stackblitz.com/edit/angular-elements-official-example-q4ueqr

提前致谢。

PS：如果我在另一个 Angular 应用程序中使用 Web 组件，则绑定工作正常。

4

1 回答 1

2

我实际上有同样的问题。正在调试它，似乎有一些代码 @angular/elements （我使用的是 7.2.15 版）包，当它们评估为 false 时跳过设置初始化属性。

/** Set any stored initial inputs on the component's properties. */
    ComponentNgElementStrategy.prototype.initializeInputs = function () {
        var _this = this;
        this.componentFactory.inputs.forEach(function (_a) {
            var propName = _a.propName;
            var initialValue = _this.initialInputValues.get(propName);
            if (initialValue) {
                _this.setInputValue(propName, initialValue);
            }
            else {
                // Keep track of inputs that were not initialized in case we need to know this for
                // calling ngOnChanges with SimpleChanges
                _this.uninitializedInputs.add(propName);
            }
        });
        this.initialInputValues.clear();
    };

作为一种解决方法，您可以将标志转换为字符串，将其包装在对象中，或从组件中查看元素属性。

于 2020-02-27T22:05:31.293 回答