基础

ViewChild

ViewChild 装饰器用于获取模板视图中的元素或直接调用其组件中的方法。它支持 Type 类型或 string 类型的选择器,同时支持设置 read 查询条件,以获取不同类型的实例。比如ElementRefViewContainerRef.

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');
}
}

参考

Angular4学习笔记(七)- ViewChild和ViewChildren的更多相关文章

  1. Angular4学习笔记-目录汇总

    Angular4学习笔记(一)-环境搭建 Angular4学习笔记(二)-在WebStorm中启动项目 Angular4学习笔记(三)- 路由 Angular4学习笔记(四)- 依赖注入 Angula ...

  2. (转)Qt Model/View 学习笔记 (七)——Delegate类

    Qt Model/View 学习笔记 (七) Delegate  类 概念 与MVC模式不同,model/view结构没有用于与用户交互的完全独立的组件.一般来讲, view负责把数据展示 给用户,也 ...

  3. Learning ROS for Robotics Programming Second Edition学习笔记(七) indigo PCL xtion pro live

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS forRobotics Pro ...

  4. Typescript 学习笔记七:泛型

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  5. Angular4学习笔记(十)- 组件间通信

    分类 父子组件通信 非父子组件通信 实现 父子 父子组件通信一般使用@Input和@Output即可实现,参考Angular4学习笔记(六)- Input和Output 通过Subject 代码如下: ...

  6. python3.4学习笔记(七) 学习网站博客推荐

    python3.4学习笔记(七) 学习网站博客推荐 深入 Python 3http://sebug.net/paper/books/dive-into-python3/<深入 Python 3& ...

  7. Go语言学习笔记七: 函数

    Go语言学习笔记七: 函数 Go语言有函数还有方法,神奇不.这有点像python了. 函数定义 func function_name( [parameter list] ) [return_types ...

  8. iOS 学习笔记七 【博爱手把手教你使用2016年gitHub Mac客户端】

    iOS 学习笔记七 [博爱手把手教你使用gitHub客户端] 第一步:首先下载git客户端 链接:https://desktop.github.com 第二步:fork 大神的代码[这里以我的代码为例 ...

  9. 【opencv学习笔记七】访问图像中的像素与图像亮度对比度调整

    今天我们来看一下如何访问图像的像素,以及如何改变图像的亮度与对比度. 在之前我们先来看一下图像矩阵数据的排列方式.我们以一个简单的矩阵来说明: 对单通道图像排列如下: 对于双通道图像排列如下: 那么对 ...

  10. Linux学习笔记(七) 查询系统

    1.查看命令 (1)man 可以使用 man 命令名称 命令查看某个命令的详细用法,其显示的内容如下: NAME:命令名称 SYNOPSIS:语法 DESCRIPTION:说明 OPTIONS:选项 ...

随机推荐

  1. CentOS 7.6 安装Oracle 12c

    下载地址: http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.html https://www ...

  2. 什么是Rollback Segment(已truncate和delete 命令为例)?

    Rollback Segments是在你数据库中的一些存储空间,它用来临时的保存当数据库数据发生改变时的先前值,Rollback Segment主要有两个目的: 1. 如果因为某种原因或者其他用用户想 ...

  3. Grafana 安装及 Windows 应用程序服务配置工具 NSSM使用

    网址:https://blog.csdn.net/kk185800961/article/details/83515382 1.进入conf文件,将 defaults.ini 复制一份,命名为cust ...

  4. Failed to load driver class com.mysql.jdbc.Driver from HikariConfig class classloader sun.misc.Launcher$AppClassLoader@18b4aac2

    1.错误日志 Failed to load driver class com.mysql.jdbc.Driver from HikariConfig class classloader sun.mis ...

  5. ndarray的用法总结

    #发现ndarray的一维,二维都可以用[i][j], 它们都是下标索引的连用, 比如j表示第j个元素;#二维ndarray可以用[m, n]来进行行列的操作,类似matlab中的用法.取某一列是[: ...

  6. 160A

    #include <stdio.h> int main() { int n; int sum1=0, sum2=0, sum3=0; int x, y, z; scanf("%d ...

  7. openshift 容器云从入门到崩溃之十《容器监控-数据展示》

    POD资源历史曲线(CPU.内存.网络) 监控方案heapster+hawkular-metrics+hawkular-cassandra heapster负责收集数据 hawkular-cassan ...

  8. python second lesson

    1.系统模块 新建的文件名不能和导入的库名相同,要不然python会优先从自己的目录下寻找. import sys  sys是一个系统变量,sys.argv会调出文件的相对路径,sys.argv[2] ...

  9. EF设计模式之code first

    为了支持以设计为中心的开发流程,EF推出了以代码为中心的模式code first.我们称之为代码优先开发,代码优先的开发支持更加优美的开发流程,允许在不使用设计器或者定义一个XML映射文件的情况下进行 ...

  10. Gitlab安装以及汉化

    Gitlab安装以及汉化 系统环境: CentOS 7.5 IP:192.168.1.2 关闭selinux.firewalld gitlab-ce-10.8.4 rpm包:下载地址 一.下载并安装g ...