Angular ViewChild & ViewChildren
基础
ViewChild
ViewChild 装饰器用于获取模板视图中的元素或直接调用其组件中的方法。它支持 Type 类型或 string 类型的选择器,同时支持设置 read 查询条件,以获取不同类型的实例。比如ElementRef和ViewContainerRef.
ViewChild 是属性装饰器,用来从模板视图中获取匹配的元素。视图查询在 ngAfterViewInit 钩子函数调用前完成,因此在 ngAfterViewInit 钩子函数中,就能正确获取查询的元素。
ViewChildren
ViewChildren 装饰器是用来从模板视图中获取匹配的多个元素,返回的结果是一个 QueryList 集合。
Demo
child.component.ts
@Component({
selector: 'app-child',
template: '<p>{{name}}</p><div><input value="xixi"></div>',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
public name: string = 'childName';
greeting(name: string) {
console.log('hello ' + name);
}
}
app.component.ts
@Component({
selector: 'app-root',
template: `<app-child #childA></app-child>
<app-child #childB></app-child>
<button (click)="clickMe()" >点我</button>`,
})
export class AppComponent implements OnInit {
@ViewChild('childA')
child1;
@ViewChild(ChildComponent)
child2;
@ViewChild('childB', {read: ElementRef})
child3;
@ViewChild('childB', {read: ViewContainerRef})
child4;
@ViewChildren(ChildComponent)
children;
clickMe() {
this.child1.greeting('child1');
this.child2.name = '我是child2';
this.child3.nativeElement.lastElementChild.firstElementChild.value = '我是child3~';
this.child4._data.componentView.component.greeting('child4');
this.children._results[0].greeting('children');
}
}
Angular ViewChild & ViewChildren的更多相关文章
- Angular ViewChild
viewchild // 使用方法 git clone https://git.oschina.net/mumu-osc/learn-component.git cd learn-component ...
- Angular 2 ViewChild & ViewChildren
一.ViewChild ViewChild 是属性装饰器,用来从模板视图中获取匹配的元素.视图查询在 ngAfterViewInit 钩子函数调用前完成,因此在 ngAfterViewInit 钩子函 ...
- Angular Viewchild undefined
Angular的viewchild在使用的时候报错 undefined 1 检查是否在元素上打上标识 #xxx 2 查看引用元素时的时机 是否在AfterViewInit之后 3 检查元素是否在*ng ...
- Angular @ViewChild,Angular 中的 dom 操作
Angular 中的 dom 操作(原生 js) ngAfterViewInit(){ var boxDom:any=document.getElementById('box'); boxDom.st ...
- angular ViewChild ContentChild 系列的查询参数
官方说明 官方文档 在调用 NgAfterViewInit 回调函数之前就会设置这些视图查询. 元数据属性: selector - 用于查询的指令类型或名字. read - 从查询到的元素中读取另一个 ...
- [Angular] @ViewChild read custom directive and exportAs
For example we have a component: <Card ></Card> And a driective: <Card highlighted> ...
- [Angular] ViewChild 'read' option
It is not clear in the Docs about {read: xx} option for @ViewChild. Based on the Source code, @ViewC ...
- [Angular] @ViewChild and template #refs to get Element Ref
We can use @ViewChild with component: @ViewChild(AuthMessageComponent) message: AuthMessageComponent ...
- Angular4学习笔记(七)- ViewChild和ViewChildren
基础 ViewChild ViewChild 装饰器用于获取模板视图中的元素或直接调用其组件中的方法.它支持 Type 类型或 string 类型的选择器,同时支持设置 read 查询条件,以获取不同 ...
随机推荐
- Codeforces Round #588 (Div. 2) A. Dawid and Bags of Candies
链接: https://codeforces.com/contest/1230/problem/A 题意: Dawid has four bags of candies. The i-th of th ...
- SQL Server的GO语句
https://www.cnblogs.com/cbattle/p/8784537.html go语句经常加在create.exec.drop等前面.
- Zw函数与Nt函数的分别与联系
Ring3中的NATIVE API,和Ring0的系统调用,都有同名的Zw和Nt系列函数,一度让初学者感到迷糊.N久前的我,也是相当的迷糊.现在就以ZwOpenProcess和NtOpenProces ...
- HMM 隐马尔科夫 Python 代码
import numpy as np # -*- codeing:utf-8 -*- __author__ = 'youfei' # 隐状态 hidden_state = ['sunny', 'rai ...
- 5.13T1Send 题(send)
Send 题(send) [题目描述] 某个国家有
- windows 安装python2.7
下载:https://www.python.org/downloads/release/python-2716/ 安装即可. 设置环境变量 进入C:\Python27,修改python.exe 为py ...
- linux下如何进入chroot环境?
1. 假设要chroot的根目录为/mnt 2. 创建必要的目录 mkdir /mnt/{dev,proc,sys,run} 3. 挂载和构建/dev mount -v --bind /dev /mn ...
- [go]包管理
vendor方式 //包管理发展 go get(无版本概念) -> vendor(godep)(无版本概念) -> go modules go get github.com/tools/g ...
- js对象和jQuery对象相互转换
(1)什么是js对象及代码规则 就是使用js-API,即Node接口中的API或是传统JS语法定义的对象,叫做js对象 js代码规则----divElement var divElement = do ...
- 14 statefulset (sts)控制器
statefulset (sts)控制器 可以用于部署有状态的服务,比如说redis,mysql ,zk等等... 1. 稳定且唯一的网络标志符:2. 稳定且持久的存储3. 有序,平滑地部署和扩展:4 ...