首页 > 代码库 > [Angular 2] Order Dynamic Components Inside an Angular 2 ViewContainer
[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, 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
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。