[Angular 2] Set Properties on Dynamically Created Angular 2 Components
2023-09-14 09:00:53 时间
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' )
相关文章
- [ngx-formly] Dynamically set Model Properties with Angular Formly Expressions
- [Angular] Set Metadata in HTTP Headers with Angular HttpHeaders
- [Angular] Progress HTTP Events with 'HttpRequest'
- Angular开发小笔记
- [ngx-formly] Dynamically set Model Properties with Angular Formly Expressions
- [Angular] Omit relative path by set up in tsconfig.json
- [Angular] Using ngTemplateOutlet to create dynamic template
- [Angular 2] Set Values on Generated Angular 2 Templates with Template Context
- [Angular 2] WebStorm - Managing Imports
- [AngularJS] angular-schema-form -- 1
- Angular-Bootstrap和Compiler
- 关于 Angular 工程文件 angular.json 里的 inlineCritical 属性
- 如何通过调试的方式搞清楚Angular createEmbeddedView具体创建的UI元素是什么
- 使用 Angular Universal 进行服务器端渲染的防御性编程思路
- Angular 项目中导入 styles 文件到 Component 中的一些技巧
- NgRx 和 Angular CLI 版本不一致的错误
- 从 ng build 支持的参数 --prod,谈谈 Angular workspace configuration
- Angular set函数和Component属性的命名冲突问题
- Angular应用的router-outlet使用一个例子
- fragment in UI5 Smart Template and directive in Angular
- Angular [(ngModel)]的ng-dirty设置时机