创建动态角度 8 组件和 html 元素并重新排列它们答案

【问题标题】：Creating dynamic angular 8 components and html element and rearranging them创建动态角度 8 组件和 html 元素并重新排列它们
【发布时间】：2020-06-03 09:29:48
【问题描述】：

我有以下问题。我有一个包含 Angular 8 组件名称和 html 元素的数组。目前它正在创建 angular 8 组件和 html 元素，但不会像在数组中排序那样排列它们。这是我的代码：

for (var i = 0; i < res.length; i++) {
            var val = res[i];
            if (val.value.Type) {
                //Getting the factory for the component
                const factories = Array.from(this.resolver['_factories'].keys());
                const factoryClass = <Type<any>>factories.find((x: any) => x.name === val.editor.alias);

                const factory = this.resolver.resolveComponentFactory(factoryClass);
                //Creating the component
                this.Container.createComponent(factory);
            } else {
                this.$Element.append(val.value);
            }
}

My DOM looks the following

角度组件总是直接插入到 .content div 之后。我已经尝试过使用 Container.insert 但它也不起作用。

【问题讨论】：

创建一个虚拟 div 容器并在该 div 容器中创建组件，而不是使用该 div 容器插入 this.Container
你能举个例子吗？
如果你能创造小提琴或 salckblilz 我可以帮助你。

标签： javascript angular typescript angular8 angular-dynamic-components

【解决方案1】：

要将动态创建的组件添加到 DOM，您可以使用 JQuery：

const factory = this.resolver.resolveComponentFactory(factoryClass);
//Creating the component
var component = factory.create(this.Container.parentInjector);
//Appending the component node to the register element
this.Container.insert(component.hostView);
this.$RootElement.parent().append(component.hostView["rootNodes"][0]);

这将创建元素并使用 JQuery 插入 html 标签

【讨论】：