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:选项 ...
随机推荐
- 再次重温《Right here waiting》
记得高中时候听到这首曲子(当时还让同桌帮我抄了这首曲子,后来这个本子也不知道扔到哪里去了), 前天偶尔在虾米遇到这首曲子,过去的青涩岁月历历在目,自己手动打打歌词,一方面是为了重温这首曲子,另一方面, ...
- day21 二十一、垃圾回收机制、re正则
一.内存管理 1.垃圾回收机制:不能被程序访问到的数据称之为垃圾 2.引用计数:引用计数是用来记录值的内存地址被记录的次数 每一次对值地址的引用都可以使该值的引用计数 +1 每一次对值地址的释放都可以 ...
- 悬线法 || BZOJ3039: 玉蟾宫 || Luogu P4147 玉蟾宫
题面: P4147 玉蟾宫 题解:过于板子举报了 #include<cstdio> #include<cstring> #include<iostream> #de ...
- F#周报2019年第4期
新闻 F# 4.6预览 fuget.org现在显示包依赖从属,你曾经想要了解谁在使用你的类库吗?现在你可以知道了! F#被加入Wikipedia的流式接口页面 采访Erik Schierboom Az ...
- 自定制property
class Lazyproperty: def __init__(self, func): self.func = func def __get__(self, instance, owner): p ...
- 线程同步-SpinWait
这次将描述如何不适用内核模式的方式来使线程等待.SpinWait,它是一个混合同步构造,被设计为使用用户模式等待一段时间,然后切换到内核模式以节省CPU时间. 代码Demo: using System ...
- 2018-2019-2 20165330《网络对抗技术》Exp5 MSF基础应用
目录 基础问题 相关知识 实验目的 实验内容 实验步骤 离实战还缺些什么技术或步骤? 实验总结与体会 实验目的 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路 返回目 ...
- LeetCode 19 - 删除链表的倒数第N个节点 - [链表]
题目链接:https://leetcode-cn.com/problems/remove-nth-node-from-end-of-list/ 题解: 两个 $p,q$ 指针均指向头,然后 $q$ 先 ...
- 前端JavaScript获取时间戳
/** * 获取时间戳 * @param {*长度} len */ export function getTimestamp(len=) { var tmp = Date.parse( new Dat ...
- 最全的MonkeyRunner自动化测试从入门到精通(5)
夜神模拟器的安装与配置步骤一:我们为什么会选择使用夜神模拟器呢? 众所周知,Android studio的模拟器运行速度也很快,可以媲美真机.虽然其运行速度很快,可以满足我们测试的需求.但仍存在以下问 ...