zoukankan      html  css  js  c++  java
  • [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.hostVie

    How to get the children number inside the host veiw?

    this.container.length
  • 相关阅读:
    三菱Q系列PLC MC协议通讯
    相机常用属性配置简介[转]---Labview IMAQ 修改相机曝光等参数的方法
    数码显微镜的实际放大倍数的正确计算方法【转载】
    VS2012 C# 配置log4net
    CHM格式帮助文档无法打开的问题
    win10 下安装win7虚拟机
    杂记:使用RawCap和Wireshark对 127.0.0.1或localhost 进行抓包
    杂记:01
    linux应用编程一:文件IO和目录操作
    QTableWidget常用函数及注意事项
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5901424.html
Copyright © 2011-2022 走看看