Angular4学习笔记(七)- ViewChild和ViewChildren
基础
ViewChild
ViewChild 装饰器用于获取模板视图中的元素或直接调用其组件中的方法。它支持 Type 类型或 string 类型的选择器,同时支持设置 read 查询条件,以获取不同类型的实例。比如ElementRef
和ViewContainerRef
.
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 2 ViewChild & ViewChildren
- How can I select an element in a component template?
- What is the read parameter in @ViewChild for
Angular4学习笔记(七)- ViewChild和ViewChildren的更多相关文章
- Angular4学习笔记-目录汇总
Angular4学习笔记(一)-环境搭建 Angular4学习笔记(二)-在WebStorm中启动项目 Angular4学习笔记(三)- 路由 Angular4学习笔记(四)- 依赖注入 Angula ...
- (转)Qt Model/View 学习笔记 (七)——Delegate类
Qt Model/View 学习笔记 (七) Delegate 类 概念 与MVC模式不同,model/view结构没有用于与用户交互的完全独立的组件.一般来讲, view负责把数据展示 给用户,也 ...
- Learning ROS for Robotics Programming Second Edition学习笔记(七) indigo PCL xtion pro live
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS forRobotics Pro ...
- Typescript 学习笔记七:泛型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- Angular4学习笔记(十)- 组件间通信
分类 父子组件通信 非父子组件通信 实现 父子 父子组件通信一般使用@Input和@Output即可实现,参考Angular4学习笔记(六)- Input和Output 通过Subject 代码如下: ...
- python3.4学习笔记(七) 学习网站博客推荐
python3.4学习笔记(七) 学习网站博客推荐 深入 Python 3http://sebug.net/paper/books/dive-into-python3/<深入 Python 3& ...
- Go语言学习笔记七: 函数
Go语言学习笔记七: 函数 Go语言有函数还有方法,神奇不.这有点像python了. 函数定义 func function_name( [parameter list] ) [return_types ...
- iOS 学习笔记七 【博爱手把手教你使用2016年gitHub Mac客户端】
iOS 学习笔记七 [博爱手把手教你使用gitHub客户端] 第一步:首先下载git客户端 链接:https://desktop.github.com 第二步:fork 大神的代码[这里以我的代码为例 ...
- 【opencv学习笔记七】访问图像中的像素与图像亮度对比度调整
今天我们来看一下如何访问图像的像素,以及如何改变图像的亮度与对比度. 在之前我们先来看一下图像矩阵数据的排列方式.我们以一个简单的矩阵来说明: 对单通道图像排列如下: 对于双通道图像排列如下: 那么对 ...
- Linux学习笔记(七) 查询系统
1.查看命令 (1)man 可以使用 man 命令名称 命令查看某个命令的详细用法,其显示的内容如下: NAME:命令名称 SYNOPSIS:语法 DESCRIPTION:说明 OPTIONS:选项 ...
随机推荐
- Changing Ethernet Media Speed for AIX
ITS UNIX Systems Changing Ethernet Media Speed for AIX First you need to find out the device name of ...
- [efficiency] emacs入门
一. 没记错的话,这可能是第三次读emacs tutorial了.前两次读的非常慢,也不记得有没有读完了.总之最后都忘光了. 这次读的很顺畅,利用工作的空闲时间加上今天晚上(周日).总算是读完了. 没 ...
- 学习 yjango 博士的学习方法后的总结
博士的初期内容主要是机器学习, 基于机器学习的理论来总结人类自身的学习过程和方式, 现总结博士视频中提到的主要方式 -. 学习的原则 例子重塑大脑 明确输入输出 用二阶知识拆分知识 二. 什么是学习 ...
- toolbar按钮添加图标
需要toolbar关联imagelist组件,imagelist组件添加需要的图片,在toolbar新建按钮,按钮中选择相应图表.
- linux 逆向映射机制浅析
2017-05-20 聚会回来一如既往的看了会羽毛球比赛,然后想到前几天和朋友讨论的逆向映射的问题,还是简要总结下,免得以后再忘记了!可是当我添加时间……这就有点尴尬了……520还在写技术博客…… 闲 ...
- vue中富文本编辑框
.npm install vue-quill-editor --save .npm install quill --save .封装成子组件 <template> <quill-ed ...
- 解决 FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 问题
https://blog.csdn.net/weixin_41196185/article/details/81114226 今天在启动vue项目的时候报了这样一个错误 观察到关键词是 FATAL E ...
- 组件式开发(Vue)
什么是组件式开发: 组件式开发就是将单个组件组合起来,形成一个大的组件进行页面的开发完成 什么是复合型组件: 复合型组件就是将相同的功能写成一个公用的组件(单元组件),供其他组件使用,就类似于后台开发 ...
- make pycaffe时候报错:Makefile:501: recipe for target 'python/caffe/_caffe.so' failed
安装caffe-ssd编译环境的时候报错: python/caffe/_caffe.cpp:10:31: fatal error: numpy/arrayobject.h: No such file ...
- [ Python ] OpenGL
pyOpenGL Installation Package Version------------------- -------numpy 1.14.2 PyOpenGL 3.1.0 PyOpenGL ...