Angular v6元素@Input（）用于初始绑定不起作用

Question

我创建了一个自定义元素并放在这样的页面上：

<my-custom-element [value]="100"></my-custom-element>

在组件定义中，我有：

@Input() value: number = 50;

在运行时，该值始终为50.我希望它为100.如果我删除默认值，则值是未定义的。我错过了什么？

谢谢！

Answer 1

使用方括号将评估引号中的内容作为模板表达式。因此，在您的方案中，Angular将检查对象100是否在您的组件类中。由于100不是您的组件类中定义的对象，因此它将不起作用。如果只想传递一个值，请省略括号。

请注意，以下内容也将解决您的问题，因为Angular会将100识别为字符串并将其简单地传递给myCustomElement的Input（）：

<my-custom-element [value]="'100'"></my-custom-element>

Answer 2

在NG Elements中，您可能无法在OnIt中找到，而在OnChanges中找到。

请添加以下行并检查其定义。

public ngOnChanges(): void {
    console.log('on changes value: ', this.value);
}

Answer 3

要在(model) => Transform(model) 中设置数据，您必须使用香草js，Angular Elements并按如下所示分配数据

自定义元素标签

query selector

通过查询选择器选择自定义元素并分配值。

<my-custom-element value ></my-custom-element>