我的 angular 7 Web 组件 @Input<boolean> 在我绑定一个假值时不起作用

Question

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

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

当我尝试绑定到文字错误值时出现问题：

table.myBooleanInput = false

这不会改变组件上的任何内容 @Input myBooleanInput = true 该值仍然是永远正确的。不管改多少次都是false。

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

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

提前致谢。

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

Answer 1

我实际上也遇到了同样的问题。正在调试它，似乎有一些代码 @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();
    };

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

我的 angular 7 Web 组件 @Input<boolean> 在我绑定一个假值时不起作用

My angular 7 web component @Input<boolean> doesn't work when I bind a false value

javascript

angular

angular-elements