Установить массив для атрибута внешнего углового компонента - PullRequest
Новая
       29

Установить массив для атрибута внешнего углового компонента

0 голосов
/ 19 октября 2018

Моя проблема заключается в следующем:

Я хотел бы загрузить внешние компоненты Angular с удаленного сервера на runtime.Мне удается сделать это хорошо благодаря сообщению в блоге от Манфреда Штайера

Дело в том, что мне нужно передать некоторый объект data компоненту, который я загружаю в runtime.В сообщении от Манфреда Штайера он делает это, но не для объектов.

Что я делаю шаг за шагом:

Сначала я создаю отдельный Angular проект, которыйнапример, берет объект данных, как это:

Внутри RandomComponent.ts: 

Interface Random: {
   name: string;
   age: number;
}[]
@Input() data: Random;

Внутри RandomComponent.html: 

<div>
    <div *ngFor="let d of data">{{d.name}}</div>
</div>

Далее я собираю этот компонент и получаюфайл, который выглядит как: random-component.bundle.js.Я помещаю этот файл на сервер и отображаю его при необходимости.

Теперь в основном проекте Angular я хочу загрузить этот файл и передать ему объект данных.Если следовать блогу Манфреда Штайера , я бы поступил так: 

// creation of element from bundle
const script = document.createElement('script');
script.src = 'assets/random-component.bundle.js';
document.body.appendChild(script);

// creation of new element based on selector from bundle
const data = [{name: 'Dave', age: 19}, {name: 'Charly', age: 23}];
const component = document.createElement('random-component');
component.setAttribute('data', data);

Но я не могу установить такой атрибут, какие-либо идеи?

Ответы [ 2 ]

0 голосов
/ 22 октября 2018

Для тех, кто заинтересован!

Вместо передачи array, я передаю строковый array с JSON.stringify(data), который возвращает string, который я затем могу передать атрибуту:

Основной компонент 

  const component = document.createElement(identifier);
  component.setAttribute('data', JSON.stringify(data));
  const content = document.getElementById('content');
  content.appendChild(component);

Внешний компонент - random.component.ts 

  parseData(data: string) {
    return JSON.parse(data);
  }

Внешний компонент - случайный.component.html 

<div>
    <div *ngFor="let d of parseData(data)">{{d.name}}</div>
</div>

Работает!Но есть некоторые проблемы с односторонней привязкой

0 голосов
/ 19 октября 2018

Проверьте имя @Input в компоненте random-component.Вы пытаетесь установить атрибут, чтобы в компоненте существовало одно и то же имя.

...