12

我最近开始玩一些在 Angular V6 中发布的 Angular 元素，为此我打开了一个小型沙盒项目。 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 是一个由 Angular 元素功能生成的 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>

我收到以下错误：

未捕获的错误：找不到“字符串”类型的不同支持对象“哇，哇 2”。NgFor 仅支持绑定到 Iterables，例如 Arrays。

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

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

但这都不起作用。

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

这里有人可以成功地将数组/对象作为输入传递给角度元素吗？

4

2 回答 2

22

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

  1. 在初始化属性之前，我必须添加角度元素脚本 (ndv-elements.js)。
  2. 与 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

于 2018-06-12T09:15:48.000 回答
0

您可以通过这样做将复杂类型作为内联属性传递，使用 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;
  }

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

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

或从脚本

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

请注意！

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

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

于 2021-05-22T15:17:57.263 回答