[Angular] ViewChild 'read' option

It is not clear in the Docs about {read: xx} option for @ViewChild.

Based on the Source code, @ViewChild as view as Component, ElementRef, TemplateRef.

For example, we have:

<one></one>
  @ViewChild(OneComponent)
  one: OneComponent;
  ngAfterViewInit() {
    console.log(‘after‘, this.one);
  }

Now we read ‘OneComponent‘ as a component, if we want to read it as ElementRef, we can do:

  @ViewChild(OneComponent, {read: ElementRef})
  one: ElementRef;

[Angular] ViewChild 'read' option

原文地址:https://www.cnblogs.com/Answer1215/p/10192285.html

时间: 2024-10-14 21:12:06

[Angular] ViewChild 'read' option的相关文章

Angular Viewchild undefined

Angular的viewchild在使用的时候报错 undefined 1 检查是否在元素上打上标识 #xxx 2 查看引用元素时的时机 是否在AfterViewInit之后 3 检查元素是否在*ngIf="false"之内 参考: 1 https://stackoverflow.com/questions/34947154/angular-2-viewchild-annotation-returns-undefined 原文地址:https://www.cnblogs.com/wol

[Angular] @ViewChild and template #refs to get Element Ref

We can use @ViewChild with component: @ViewChild(AuthMessageComponent) message: AuthMessageComponent; //.... ngAfterContentInit() { if (this.message) { this.message.days = 30; } } By doing this, we actually can access component's prop and events. If

Scope Directive

---------------------------Scope-------------------------------- https://docs.angularjs.org/guide/scope What are Scopes? Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hiera

echarts常用说明

import { Injectable } from '@angular/core'; //模板option通用 let fff7 = '#fff'; //字体统一颜色rgba(255,255,255,0.7) let fs = 14; //图表统一字体大小 let COLOR = ['#FBA3BC', '#0C8AEB', '#2EEA07', '#D74D0A', '#BE8EDE', '#66cccc', '#ff6666', '#cc3399', '#499FD9']; //主体颜色

[Angular 2] ElementRef, @ViewChild &amp; Renderer

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

Angular 2 中的 ViewChild 和 ViewChildren

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

[Angular 2] @ViewChild to access Child component&#39;s method

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

Angular 中的 dom 操作(ViewChild)以及父子组件中通过 ViewChild 调用子组件的方法

<app-header #header></app-header> <div #myBox> 我是一个dom节点 </div> <button (click)="getChildRun()">获取子组件的方法</button> /* ViewChild获取dom节点 1.模板中给dom起一个名字 <div #myBox> 我是一个dom节点 </div> 2.在业务逻辑里面引入ViewChi

angular ui $modal 使用 option

$modal是一个可以迅速创建模态窗口的服务,创建部分页,控制器,并关联他们 $modal仅有一个方法open(options) templateUrl:模态窗口的地址 template:用于显示html标签 scope:一个作用域为模态的内容使用(事实上,$modal会创建一个当前作用域的子作用域)默认为$rootScope controller:为$modal指定的控制器,初始化$scope,该控制器可用$modalInstance注入 resolve:定义一个成员并将他传递给$modal指