我遇到了一个问题，我创建了 Angular Web 组件(或 Angular Web 元素)，并且尝试通过 @Input() 获取传递到组件中的值。这个值只是没有通过，但我已经让它与 Angular 中的任何其他 @Input() 相同。我很困惑。
代码如下所示:
组件.ts
@Input() displayGroup: string;
ngOnInit() {
console.log(this.displayGroup);
}
使用元素
<my-custom-element displayGroup="test"></my-custom-element>
为什么输入的值会这样？控制台中显示的值为:
未定义
最佳答案
Angular Web 组件的工作方式与普通 Angular 组件略有不同。
从Angular的官方文档中可以看到here
The creation API parses the component looking for input properties, and defines corresponding attributes for the custom element. It transforms the property names to make them compatible with custom elements, which do not recognize case distinctions. The resulting attribute names use dash-separated lowercase. For example, for a component with @Input('myInputProp') inputProp, the corresponding custom element defines an attribute my-input-prop.
这意味着在 HTML 中您需要以下内容:
<my-custom-element display-group="test"></my-custom-element>
您声明的任何 @Input() 变量对于您将使用它的输入都需要是短横线小写
关于javascript - Angular Web 组件 - @Input 未收到值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62322167/