zoukankan      html  css  js  c++  java
  • [Angular 2] Set Properties on Dynamically Created Angular 2 Components

    When you generate Angular 2 components, you’re still able to access the component instance to set properties and invoke methods from the component class.

    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'
            )
        }
    
    }

    widget-three.ts:

    import {Component, OnInit, ViewChild, Renderer, ElementRef, Input} from '@angular/core';
    
    @Component({
        moduleId: module.id,
        selector: 'widget-three',
        template: `<input type="text" #inputRef [value]="message"/>`
    })
    export class WidgetThree {
    
        @ViewChild('inputRef') input;
        @Input() message = "Default Value";
    
        constructor(private renderer: Renderer) {
        }
    
        ngAfterViewInit(){
            this.renderer.invokeElementMethod(
                this.input.nativeElement,
                'focus',
                []
            );
        }
    }

    So each time, when we call 'createComponent' method, it returns a ComponentRef instance. See https://angular.io/docs/ts/latest/api/core/index/ViewContainerRef-class.html

    We can use the instance to access the generated component's props, such as 'Renderer' or Input (message). Here we change the message value.

     comRef.instance.message = "I am last";

    And change the style thought Renderer:

            comRef.instance.renderer.setElementStyle(
                comRef.instance.input.nativeElement,
                'color',
                'red'
            )
  • 相关阅读:
    flume采集log4j日志到kafka
    解决spring 事务管理默认不支持SQLException等运行时异常
    基于黑名单的xss过滤器
    VMware创建Linux虚拟机并安装CentOS(三)
    dubbo 常见错误
    Dubbo与Zookeeper、SpringMVC整合和使用(负载均衡、容错)
    zookeeper工作原理、安装配置、工具命令简介
    VMware创建Linux虚拟机并安装CentOS(二)
    NSPredicate谓词
    IOS网络请求之NSURLSession使用详解
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5900691.html
Copyright © 2011-2022 走看看