[Angular 2] Order Dynamic Components Inside an Angular 2 ViewContainer-优快云博客

本文介绍如何使用Angular2的ViewContainer来动态创建并指定位置插入组件。通过在createComponent()方法中传递第二个参数，可以实现在组件列表中的特定位置插入新组件。文中提供了一个具体的例子，展示了如何在一个按钮点击事件中实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

By default, when you generate components, they will simply be added to the page in order, one after another. Angular 2 provides methods on the ViewContainer that allow you to reorder components once they’ve been created and provide the order that you want.

When you want to create a component and insert it at cetern position of the list. Then what you need to do is just pass in a second param, when you call 'createComponent()'.

import {Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, Input} from '@angular/core';
import {SimpleService} from "../../serivces/simple.service";
import {WidgetThree} from "../widgets/widget-three.component";

@Component({
    moduleId: module.id,
    selector: 'home',
    templateUrl: 'home.component.html'
})
export class HomeComponent {

    @ViewChild('container', {
        read: ViewContainerRef
    }) container;

    constructor(private resolver: ComponentFactoryResolver, private simpleService: SimpleService) {
    }

    ngAfterContentInit(){
        const WidgetFactory = this.resolver.resolveComponentFactory(WidgetThree);
        this.container.createComponent(WidgetFactory);
        this.container.createComponent(WidgetFactory);
        this.container.createComponent(WidgetFactory);
        this.container.createComponent(WidgetFactory);
        const comRef = this.container.createComponent(WidgetFactory); // return a componentRef
        comRef.instance.message = "I am last"; // using componentRef's instance prop to access the component prop
        comRef.instance.renderer.setElementStyle(
            comRef.instance.input.nativeElement,
            'color',
            'red'
        )
    }

    onClick(){
        const WidgetFactory = this.resolver.resolveComponentFactory(WidgetThree);
        const comRef = this.container.createComponent(WidgetFactory, 2);
        comRef.instance.message = "I am third";
    }

}