ElementRef: In Angular2 Doc, it suggest to "avoid" using ElementRef. It access DOM directly, can easily be attacked. import {Component, OnInit, ViewChild, Renderer, ElementRef} from '@angular/core'; @Component({ moduleId: module.id, selector: 'w…

When you want to access child component's method, you can use @ViewChild in the parent: Parent Component: import {Component, OnInit, ViewChild} from 'angular2/core'; import {HeroService, Hero} from './HeroService'; import {Observable} from 'rxjs/Rx';…

代码如下: @Component({ selector: 'my-app', template: ` <step-bar #stepBar></step-bar> ` }) export class AppComponent{ //利用模板变量stepBar获取子组件的引用 @ViewChild('stepBar') stepBar: StepBarComponent; //执行子组件的init方法(需要在AfterViewInit钩子后执行) ngAfterViewInit()…

官方说明 官方文档 在调用 NgAfterViewInit 回调函数之前就会设置这些视图查询. 元数据属性: selector - 用于查询的指令类型或名字. read - 从查询到的元素中读取另一个令牌. 所支持的选择器包括: 任何带有 @Component 或 @Directive 装饰器的类 字符串形式的模板引用变量(比如可以使用 @ViewChild('cmp') 来查询 <my-component #cmp> 组件树中任何当前组件的子组件所定义的提供商(比如 @ViewChild(S…

一.Angular 中的 dom 操作(原生 js) 二.Angular 中的 dom 操作(ViewChild) 三.父子组件中通过 ViewChild 调用子组件 的方法 1.调用子组件给子组件定义一个名称 1. 引入 ViewChild 3. ViewChild 和刚才的子组件关联起来 4.调用子组件…

基础 ViewChild ViewChild 装饰器用于获取模板视图中的元素或直接调用其组件中的方法.它支持 Type 类型或 string 类型的选择器,同时支持设置 read 查询条件,以获取不同类型的实例.比如ElementRef和ViewContainerRef. ViewChildren ViewChildren 装饰器是用来从模板视图中获取匹配的多个元素,返回的结果是一个 QueryList 集合. Demo child.component.ts @Component({ selec…

@viewChild 作用一:选择组件内节点 <!--视图 --> <div #mydiv><input></div> // 选择 @ViewChild('mydiv') mydiv: ElementRef // 返回原生节点 let el = this.mydiv.nativeElement // // 使用原生方法 let ipt = el.querySelector('input') 作用二:选择子组件可调用自组件内的函数 子组件:@Component…

angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net/topic/12/post/2 系列目录 (1)组件详解之模板语法 (2)组件详解之组件通讯 (3)内容投影, ViewChild和ContentChild (4)指令 内容投影 1为什么需要内容投影? 一个事物的出现,必然存在它所能解决的问题,让我们先从问题出发吧: 大家应该都知道,在html规…

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 clas…

https://segmentfault.com/a/1190000008695459 ViewChild ViewChild 是属性装饰器,用来从模板视图中获取匹配的元素.视图查询在 ngAfterViewInit 钩子函数调用前完成,因此在 ngAfterViewInit 钩子函数中,才能正确获取查询的元素. @ViewChild 使用模板变量名 import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular…