Angular 将数组设置为外部角度组件的属性

我的问题如下：

我想在运行时从远程服务器加载外部

Angular

组件。我成功地做到了这一点，多亏了

问题是我需要将一些

数据

对象传递给我在

运行时加载的组件

。在来自的帖子中，他这样做，但不针对对象

我正在一步一步地做什么：

首先，我创建一个单独的

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);

内部

RandomComponent.ts

：

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

内部

RandomComponent.html

：

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

---

但是我不能设置这样的属性，有什么想法吗？

检查

随机组件中的
@Input
名称。您正在尝试设置属性，以便组件中应该存在相同的名称。
对于感兴趣的人

我没有传递
数组
，而是传递一个带有
JSON的字符串化
数组
。字符串化（数据）
，它返回一个
字符串
，然后我可以传递给属性：

主要部件

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

外部组件-随机.Component.ts

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

外部组件-random.Component.html

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


{{d.name}

它起作用了！但是单向绑定存在一些问题
Hello Sunil，对不起，我忘了提到@Input（）被称为数据！您是否在主体中添加了
随机组件
组件，还是在创建后添加了一些组件？是的，我添加了<代码>常量内容=document.getElementById（'content'）
content.appendChild（组件）需要为此执行多个检查。你可以做的是，删除所有内容，只保留普通的html内容，并检查是否至少可以在页面中看到组件。设置属性是下一步。我已经可以在页面中看到该组件，因此对于该部分，它很好，我只是无法传递数组或绑定数据：）