Question

我的问题如下：

我想从位于Angular的远程服务器上加载外部runtime组件。感谢Manfred Steyer

的博客文章，我设法做好了

问题是我需要将一些data对象传递给我正在runtime处加载的组件。在Manfred Steyer的帖子中，他做到了，但不针对对象。

我正在逐步做的事情：

首先，我创建一个单独的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主项目中，我想加载此文件并将其传递给他一个数据对象。如果关注Manfred Steyer上的博客，我会这样：

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

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

Answer 1

检查@Input组件中的random-component名称。您正在尝试设置属性，以便组件中应存在相同的名称。

Answer 2

对于那些感兴趣的人！

我没有传递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);
  }

外部组件-random.component.html

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

有效！但是单向绑定存在一些问题

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

2 个答案: