javascript - 当我绑定(bind) false 值时，我的 Angular 7 Web 组件 @Input<boolean> 不起作用

Question

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

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

当我尝试绑定(bind)到文字错误值时，问题就出现了:

table.myBooleanInput = false

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

我能够将它绑定(bind)为一个真实值，它渲染得很好。仅当使用字面量 false 时才会出现问题。

以下是此问题的工作再现: https://stackblitz.com/edit/angular-elements-official-example-q4ueqr

提前致谢。

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

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

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