Angular ViewChild
viewchild
// 使用方法
git clone https://git.oschina.net/mumu-osc/learn-component.git
cd learn-component
git pull origin viewchild
npm install
ng serve
<!-- test-view-child.component.html -->
<div class="panel panel-primary">
<div class="panel-heading">父组件</div>
<div class="panel-body">
<child-one></child-one>
<child-one></child-one>
<child-one></child-one>
<child-one></child-one>
</div>
</div>
// test-view-child.component.ts
import { Component, OnInit, ViewChild, ViewChildren, QueryList } from '@angular/core';
import { ChildOneComponent } from './child-one/child-one.component';
@Component({
selector: 'test-view-child',
templateUrl: './test-view-child.component.html',
styleUrls: ['./test-view-child.component.scss']
})
export class TestViewChildComponent implements OnInit {
// @ViewChild(ChildOneComponent)
// childOne:ChildOneComponent;
@ViewChildren(ChildOneComponent)
children:QueryList<ChildOneComponent>;
constructor() { }
ngOnInit() {
}
ngAfterViewInit():void{
// console.log(this.childOne);
this.children.forEach((item)=>{
console.log(item);
//动态监听子组件的事件
item.helloEvent.subscribe((data)=>{
console.log(data);
});
});
}
}
// child-one.component.ts
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'child-one',
templateUrl: './child-one.component.html',
styleUrls: ['./child-one.component.scss']
})
export class ChildOneComponent implements OnInit {
@Output()
helloEvent:EventEmitter<string>=new EventEmitter<string>();
constructor() { }
ngOnInit() {
}
public sayHello():void{
this.helloEvent.emit("hello...");
}
}
什么是ViewChild
从上面的代码可以看出viewchild是为了父组件可以获取字组件,进行计数、调用字组件内部方法等等功能所提供的机制。。。。
具体用法:比如,可以在轮播图组件中,进行获取所插入图片的数量等,从而实现一个通用的轮播图组件
Angular ViewChild的更多相关文章
- 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 ...
- Angular ViewChild & ViewChildren
基础 ViewChild ViewChild 装饰器用于获取模板视图中的元素或直接调用其组件中的方法.它支持 Type 类型或 string 类型的选择器,同时支持设置 read 查询条件,以获取不同 ...
- 如何把一个vue组件改为ionic/angular组件
同是mvvm框架,他们之间是很相似的,如何你已经熟悉其中的一个,那么另一个也就基本上也就会的差不多了. 一.动态属性.值.事件绑定 vue中使用v-bind:或者之间分号:进行绑定 ng中左括号[]进 ...
- [Angular 2] ElementRef, @ViewChild & Renderer
ElementRef: In Angular2 Doc, it suggest to "avoid" using ElementRef. It access DOM directl ...
随机推荐
- 深层神经网络框架的python实现
概述 本文demo非常适合入门AI与深度学习的同学,从最基础的知识讲起,只要有一点点的高等数学.统计学.矩阵的相关知识,相信大家完全可以看明白.程序的编写不借助任何第三方的深度学习库,从最底层写起. ...
- Ubuntu中类似任务管理器的东西?
Ubuntu里面有没有类似windows中任务管理器的东西呢?怎么打开?谢谢!!! ================================ 检举| 2009-02-01 16:50提问者 ...
- C#获取显示器屏幕数量 控制winform显示到哪一个屏幕
获取当前系统连接的屏幕数量: Screen.AllScreens.Count();获取当前屏幕的名称:string CurrentScreenName = Screen.FromControl(thi ...
- 摘:通过ICursor对Table进行操作(添加、修改、删除)
通过ICursor对Table进行操作(添加.修改.删除) 连接上数据表的目的就是对其进行包括浏览.添加.修改.删除等基本操作. 浏览功能,之前文章中一提到,就是将Itable转换为DataTable ...
- 请介绍WCF服务
WCF本质上提供一个跨进程.跨机器以致跨网络的服务调用 WCF合并了Web服务..net Remoting.消息队列和Enterprise Services的功能并集成在Visual Studio中, ...
- MySQL中多表删除方法
如果您是才接触MySQL数据库的新人,那么MySQL中多表删除是您一定需要掌握的,下面就将为详细介绍MySQL中多表删除的方法,供您参考,希望对你学习掌握MySQL中多表删除能有所帮助. 1.从MyS ...
- ui-router详解(二)ngRoute工具区别
我们了解 angular.js 是一种富客户端单页面应用,所以要在一个页面呈现不同的视图,路由起到了至关重要的作用. angular.js 为我们封装好了一个路由工具 ngRoute ,它是一种靠ur ...
- 【BLE】CC2541之主机端读取特征值
本篇博文最后改动时间:2017年01月06日,11:06. 一.简单介绍 本文介绍怎样在SimpleBLECentralproject中,读取SimpleBLEPeripheralproject中的特 ...
- 【Android】13.3 使用SQLite.NET-PCL访问SQLite数据库
分类:C#.Android.VS2015: 创建日期:2016-02-26 一.简介 本章开头已经说过了,SQLite.NET-PCL用起来很爽,这一节咱们看看怎样使用吧. 二.示例3运行截图 下面左 ...
- 2、Reactive Extensions for .NET(译)
实验3-引入 .net 中的 events 到 Rx 目标:前面实验中的使用各种工厂构造方法创建一个 可观察序列是一个部分.把 .net 中现有的异步数据源进行关联 是更重要的事情.在这次实验中我们将 ...