Angular Elements - 将复杂的输入传递给我的 Web 组件答案

【问题标题】：Angular Elements - pass a complicated input to my web componentAngular Elements - 将复杂的输入传递给我的 Web 组件
【发布时间】：2018-06-11 08:09:52
【问题描述】：

我最近开始玩一些在 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，例如数组。

我也尝试过像这样通过元素本身绑定数组：

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

但这都没有用。

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

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

【问题讨论】：

标签： angular angular-elements

【解决方案1】：

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

我必须在初始化属性之前添加角度元素脚本 (ndv-elements.js)。
与 HTML 属性有关的是，它们都作为字符串传递，与 Angular 或其他可以传递对象/数组的框架相比，因此当使用 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

【讨论】：

是的，当您运行“ng serve”应用脚本（包括角度元素依赖项）被添加到正文时也可能发生这种情况，因此如果您的脚本设置属性在此之前，它将不起作用.

【解决方案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;
  }

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

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

或来自脚本

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

请注意！

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

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

【讨论】：