Angular 6创建动态组件

Question

我有一个Angular应用程序，我需要动态创建组件，而无需重新编译应用程序。

有没有办法我可以对预制组件进行标记

<app-wrapper>
  <app-article></app-article>
</app-wrapper>

将其保存在数据库中，然后将其插入我的页面中，以便这些组件正常工作？

这个想法是创建一种构造函数，以便用户可以从其他组件中构成自己的“组件”，将其保存在服务器上，然后例如通过innerHTML="customComponent"

插入。

Answer 1

使用Angular Elements，最简单的方法：

您必须将组件转换为自定义元素，以便浏览器知道它们是什么。

例如：如何注册组件：

import { Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';

您需要声明喷油器

constructor(private injector: Injector) {}

您要查找的2行：

const myElement = createCustomElement(ElementComponent, { injector });
customElements.define('app-element', myElement);

然后，如果您通过innerHtml注入html，则此元素将正确显示。

您可以在official doc

中了解有关Angular元素的更多信息。

---

使用https://angular.io/guide/dynamic-component-loader#dynamic-component-loading

更为复杂

Answer 2

没有棱角并不是那么简单。您需要做一些研究，以探索角度如何创建组件。

https://angular.io/guide/dynamic-component-loader

这是我撰写动态组件的另一篇精彩文章 https://netbasal.com/dynamically-creating-components-with-angular-a7346f4a982d

还有一件有趣的事情，我想让您探索@angular/cdk的门户网站，这使得上述步骤更加容易