Angular 元素 - 将复杂的输入传递到我的 Web 组件

Question

我最近开始尝试使用 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 elements 功能生成的 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>

我收到以下错误：

Uncaught Error: Cannot find a differ supporting object ‘wow,wow2’ of type ‘string’. NgFor only supports binding to Iterables such as Arrays.

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

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

但这都不起作用。

我也试过绑定一个对象输入，但我在 html 中看不到结果。

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

Answer 1

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

我必须在初始化属性之前添加 angular 元素脚本 (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

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 类型。

Angular 元素 - 将复杂的输入传递到我的 Web 组件

Angular Elements - pass a complicated input to my web component

angular

angular-elements