Angular 2 ViewChild & ViewChildren】的更多相关文章

一.ViewChild ViewChild 是属性装饰器,用来从模板视图中获取匹配的元素.视图查询在 ngAfterViewInit 钩子函数调用前完成,因此在 ngAfterViewInit 钩子函数中,才能正确获取查询的元素. 1.@ViewChild 使用模板变量名 import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core'; @Component({ selector: 'my-app',…
基础 ViewChild ViewChild 装饰器用于获取模板视图中的元素或直接调用其组件中的方法.它支持 Type 类型或 string 类型的选择器,同时支持设置 read 查询条件,以获取不同类型的实例.比如ElementRef和ViewContainerRef. ViewChild 是属性装饰器,用来从模板视图中获取匹配的元素.视图查询在 ngAfterViewInit 钩子函数调用前完成,因此在 ngAfterViewInit 钩子函数中,就能正确获取查询的元素. ViewChild…
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()…
1.子component中的异步方法 initCreateJob = () => new Promise((resolve, reject) => { setTimeout(() => { this.spiderFormService.saveUserJob(this.spiderJobInfo).subscribe((res: Res) => { if (res.code === 1) { // val = res.data; resolve(res.data) // fn(th…
基础 ViewChild ViewChild 装饰器用于获取模板视图中的元素或直接调用其组件中的方法.它支持 Type 类型或 string 类型的选择器,同时支持设置 read 查询条件,以获取不同类型的实例.比如ElementRef和ViewContainerRef. ViewChildren ViewChildren 装饰器是用来从模板视图中获取匹配的多个元素,返回的结果是一个 QueryList 集合. Demo child.component.ts @Component({ selec…
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…
原文链接 Understanding ViewChildren, ContentChildren, and QueryList in Angular 使用场景 有时候,我们想要在父组件中访问它的子组件.在Angular中可以使用ViewChildren ViewChild ContentChildren 来实现对子组件的访问. 假设,我们封装了一个Alert子组件 // alert.component.html <h1 (click)="alert()">{{type}}&…
Angular的viewchild在使用的时候报错 undefined 1 检查是否在元素上打上标识 #xxx 2 查看引用元素时的时机 是否在AfterViewInit之后 3 检查元素是否在*ngIf="false"之内 参考: 1 https://stackoverflow.com/questions/34947154/angular-2-viewchild-annotation-returns-undefined…
Angular 中的 dom 操作(原生 js) ngAfterViewInit(){ var boxDom:any=document.getElementById('box'); boxDom.style.color='red'; } 对变量定义数据类型,防止编译报错 Angular 中的 dom 操作(ViewChild) 定义模板(模板引用) <div #myattr></div> @ViewChild定义模板引用变量 import { Component ,ViewChil…