码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-09-23 20:00:49      阅读:110      评论:0      收藏:0      [点我收藏+]

标签:

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";
    }

}

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

标签:

原文地址:http://www.cnblogs.com/Answer1215/p/5901368.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!