[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'
)
[Angular 2] Set Properties on Dynamically Created Angular 2 Components的更多相关文章
- 在angular项目中使用web-component ----How to use Web Components with Angular
原文: https://medium.com/@jorgecasar/how-to-use-web-components-with-angular-41412f0bced8 ------------- ...
- Angular 个人深究(一)【Angular中的Typescript 装饰器】
Angular 个人深究[Angular中的Typescript 装饰器] 最近进入一个新的前端项目,为了能够更好地了解Angular框架,想到要研究底层代码. 注:本人前端小白一枚,文章旨在记录自己 ...
- 从Java角度理解Angular之入门篇:npm, yarn, Angular CLI
本系列从Java程序员的角度,带大家理解前端Angular框架. 本文重点介绍Angular的开发.编译工具:npm, yarn, Angular CLI,它们就像Java在中的Maven,同时顺便介 ...
- (转载)从Java角度理解Angular之入门篇:npm, yarn, Angular CLI
本系列从Java程序员的角度,带大家理解前端Angular框架. 本文是入门篇.笔者认为亲自动手写代码做实验,是最有效最扎实的学习途径,而搭建开发环境是学习一门新技术最需要先学会的技能,是入门的前提. ...
- angular.module()创建、获取、注册angular中的模块
// 传递参数不止一个,代表新建模块;空数组代表该模块不依赖其他模块 var createModule = angular.module("myModule", []); // 只 ...
- Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目
前言: 最近一直在使用阿里的NG-ZORRO(Angular组件库)开发公司后端的管理系统,写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善.因此这篇文章主要是对这段时间 ...
- [Angular Directive] Combine HostBinding with Services in Angular 2 Directives
You can change behaviors of element and @Component properties based on services using @HostBinding i ...
- [转]angular官网 及 Ant Design of Angular
https://angular.io/cli https://www.angular.cn/guide/quickstart https://ng.ant.design/docs/introduce/ ...
- [AngularJS] Angular 1.3 $submitted for Form in Angular
AngularJS 1.3 add $submitted for form, so you can use $submitted to track whether the submit event ...
随机推荐
- 从date中获取相应信息
创建测试用表: CREATE OR REPLACE VIEW v AS SELECT TO_DATE('2015-5-5 13:14:15', 'YYYY-MM-DD HH24:MI:SS') AS ...
- Eclipse安装插件的方式
Eclipse有两种安装插件的方式,分为在线安装和手动安装,因为受到网络环境限制,推荐采用手动安装的方式,下面我们先来了解一下Eclipse手动安装插件的步骤. Eclipse手动安装插件: 第一种: ...
- kali ssh 登录
kali 开启ssh 登录:可在windows 中通过 xshell 登录,方便操作. 修改sshd_config文件, vi /etc/ssh/sshd_config 将#PasswordAuthe ...
- [转] Python自动单元测试框架
一.软件测试 大型软件系统的开发是一个很复杂的过程,其中因为人的因素而所产生的错误非常多,因此软件在开发过程必须要有相应的质量保证活动,而软件测试则是保证质量的关键措施.正像软件熵(software ...
- SharePoint咨询师之路:设计之前的那些事二:规模
提示:本系列只是一个学习笔记系列,大部分内容都可以从微软官方网站找到,本人只是按照自己的学习路径来学习和呈现这些知识. 有些内容是自己的经验和积 累,如果有不当之处,请指正. 咨询师更多的时候是解决方 ...
- linux top命令VIRT,RES,SHR,DATA的含义
VIRT:virtual memory usage 虚拟内存1.进程“需要的”虚拟内存大小,包括进程使用的库.代码.数据等2.假如进程申请100m的内存,但实际只使用了10m,那么它会增长100m,而 ...
- HD4505小Q系列故事——电梯里的爱情
Problem Description 细心的同事发现,小Q最近喜欢乘电梯上上下下,究其原因,也许只有小Q自己知道:在电梯里经常可以遇到他心中的女神HR. 电梯其实是个很暧昧的地方,只有在电梯里,小Q ...
- I/O小总结
//判断不存在就创建目录 ,然后拷贝文件 DirectoryInfo di = null; if (!Directory.Exists(n.Attribute("value").V ...
- HIT 2275 Number sequence
点击打开HIT 2275 思路: 树状数组 分析: 1 题目要求的是总共的搭配方式,满足Ai < Aj > Ak.并且i j k不同 2 我们开两个树状数组,第一个在输入的时候就去更新.然 ...
- 在完成端口中使用GetAcceptExSockaddrs
MSDN:When using AcceptEx, the GetAcceptExSockaddrs function must be called to parse the buffer into ...