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
  • 相关阅读:
    Java线程安全和非线程安全
    时间戳获取(周,年,月,日)
    spring+spring 日志输出
    Spring+springMvc+Mybatis
    关于mysql处理百万级以上的数据时如何提高其查询速度的方法
    Tomcat 详解
    理解 $_POST、$_GET 、php://input
    php编译参数注解--不明白许多参数的作用 慎用 –with-curlwrappers参数【转载】
    centos6.5编译安装php[整理一]
    ubuntu16.04 安装chrome 和 phpstorm
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5901424.html
Copyright © 2011-2022 走看看