[Angular 2] Order Dynamic Components Inside an Angular 2 ViewContainer

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

        comRef.instance.message = "I am third";

    }

}

So when click a button, we wil call 'onClick()' method, which will create a new component and insert it at the third place in the list.

巴特西

[Angular 2] Order Dynamic Components Inside an Angular 2 ViewContainer

最新文章

热门文章