[Angular 2] Order Dynamic Components Inside an Angular 2 ViewContainer
2016-09-23 19:00
453 查看
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()'.
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.
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.
相关文章推荐
- 1106. Lowest Price in Supply Chain
- 【3】More About Jobs and Job Details
- 量化对冲那点事
- 根据Email地址跳转到邮箱登录界面
- 24 AIDL案例
- 24 AIDL案例
- 24 服务AIDL
- 24 服务AIDL
- replication factor: 3 larger than available brokers: 1
- 9.26 RSorder offer 80% off oldschool runescape gold for The Fairy Rings
- VRPN-main源码分析(1/2).md
- studio Conversion to Dalvik format failed: Unable to execute dex: method ID not in [0, 0xffff]: 6553
- dd&win32diskimager&软碟通Ultraiso 简单分析区别和长处
- Table './tsar/cpu_1' is marked as crashed and should be repaired
- Zabbix sendEmail的部署步骤
- 写的一个判断注册Email是否是个人邮件,而不是公司邮件的方法
- nc6报错 Failed to load ESAPI.properties as a classloader resource.
- ping不通 www.baidu.com 163.com
- Openfire更服务器名称后报Found RSA certificate that is not valid for the server domain的解决方法
- OpenCV Error: Assertion failed (s >= 0)