首页 > 代码库 > [Angular 2] Move and Delete Angular 2 Components After Creation
[Angular 2] Move and Delete Angular 2 Components After Creation
After the original order is set, you can still leverage methods on the Angular 2 ViewContainer to reorder the components. This is especially helpful when you want an event to trigger layout changes from your generated components.
import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver} 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 { last; @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); this.last = this.container.createComponent(WidgetFactory); // return a componentRef this.last.instance.message = "I am last"; // using componentRef‘s instance prop to access the component prop this.last.instance.renderer.setElementStyle( this.last.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"; } moveup(){ const randomInx = Math.floor(Math.random() * this.container.length); this.container.move(this.last.hostView, randomInx); }}
In the code, will just move the last WidgetTree component to some random position.
How to get the host elemnt?:
this.last.hostVieHow to get the children number inside the host veiw?
this.container.length
[Angular 2] Move and Delete Angular 2 Components After Creation
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。