Angular Elements - передать сложный ввод в мой веб-компонент - PullRequest
Новая
       17

Angular Elements - передать сложный ввод в мой веб-компонент

0 голосов
/ 11 июня 2018

В последнее время я начал немного играть с угловыми элементами, выпущенными в Angular V6, для этого я открыл небольшой проект песочницы.https://github.com/Slash7GNR/ndv-angular-elements Теперь я попытался добавить более сложный ввод в мой веб-компонент - я попытался добавить массив ввода следующим образом: в app.component.ts я добавил: 

@Input() welcomeMessages: string[];

и в шаблоне, который я добавил: 

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

Затем я создал статический html-файл и добавил следующий код: (pls-wrk - это веб-компонент, созданный угловыми элементамиfeature) 

<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: Невозможно найти другой поддерживающий объект 'wow, wow2' типа 'string'.NgFor поддерживает только привязку к итерируемым объектам, таким как массивы.

Я также пытался связать массив через сам элемент следующим образом: 

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

Но ни это не сработало.

Я также пытался связать ввод, который является объектом, но я не смог увидеть результат в html.

Любой здесь, кто мог бы успешно передать массив / объекткак вход в угловой элемент?

1 Ответ

0 голосов
/ 12 июня 2018

Итак, я нашел ответ, у меня были две основные проблемы:

  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

...