Question

我最近开始尝试使用角度V6发布的角度元素，我打开了一个小沙盒项目。 https://github.com/Slash7GNR/ndv-angular-elements 现在我尝试向我的Web组件添加更复杂的输入 - 我尝试添加数组输入，如下所示：在app.component.ts中我添加了：

@Input() welcomeMessages: string[];

并在模板中添加了：

<div *ngFor="let message of welcomeMessages; let index = index">
    {{index}} - {{message}}
</div>

然后，我创建了一个静态html文件，并添加了以下代码：（pls-wrk是由角元素功能生成的Web组件）

<pls-wrk></pls-wrk>
<script>
let arr = [“wow”,”wow2"];
let elementByTag = document.getElementsByTagName(‘pls-wrk’)[0];
elementByTag.setAttribute(“welcome-messages”, arr);
</script>
<script src="ndv-elements.js"></script>

我收到以下错误：

未捕获错误：无法找到不同的支持对象'哇，哇'的输入'string'。 NgFor仅支持绑定到Iterables，例如阵列。

我也试过通过元素本身绑定数组，如下所示：

<pls-wrk welcome-messages=”[‘wow’,wow2']”></pls-wrk>

但这都不起作用。

我也尝试绑定作为对象的输入，但我无法在html中看到结果。

此处有人能成功将数组/对象作为输入传递给角元素吗？

Answer 1

所以我找到答案，我有两个主要问题：

我必须在初始化属性之前添加角元素脚本（ndv-elements.js）。
具有HTML属性的东西是它们都作为字符串传递，与角度或其他可以传递对象/数组的框架相反，因此在使用setAttribute方法时，该属性被初始化为一个字符串，导致输入是对象/数组的问题，解决方案是设置属性如下：elementByTag.welcomeMessages = array;

所以完整的解决方案将是：

<pls-wrk>
</pls-wrk>
<script src="ndv-elements.js"></script>
<script>
let arr = ['a1','a2','a3'];
let wrk = document.querySelector('pls-wrk');
wrk.welcomeMessages = arr;
</script>

参考文献：

https://github.com/angular/angular/issues/24415

https://medium.com/@gilfink/using-complex-objects-arrays-as-props-in-stencil-components-f2d54b093e85

Answer 2

您可以通过这样做将复杂类型作为内联属性传递，使用 Setter/Getter 声明您的 Input() 指令。

internalSelectedItem: any;

@Input()
  get selectedItem(): any { return this.internalSelectedItem; }
  set selectedItem(item: any) {
    if (typeof item == "string")
      this.internalSelectedItem = JSON.parse(item);
    else
      this.internalSelectedItem = item;
  }

现在，您可以直接从 angular 元素标签传递 Array。

<custom-element selected-item="[458, 470, 476]">  </custom-element>

或者来自脚本

var arr =  [458, 470, 476]
customElem.selectedItem = arr;

请注意！

您可能需要检查您传递的 type of 值并采取相应措施，就像我在我的场景中所做的那样。

根据我的理解，当您将内联作为属性值传递时，元素会将其作为 string 类型。

角度元素 - 将复杂的输入传递给我的Web组件

2 个答案: