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