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

Question

我有以下问题。我有一个包含 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);
            }
}

我的 DOM 如下所示

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

Answer 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 标签