ElementRef, @ViewChild & 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: 'widget-three',
template: `<input type="text" #inputRef/>`
})
export class WidgetThree { constructor(private elm: ElementRef) {
console.log("elm:", this.elm) }
}
If we log out the ElementRef, we can see, it refer to host element.
Renderer:
In the doc, it also suggest, if you want to change some dom prop, use Renderer instead. ElementRef can be just a reference to access native element object.
import { Directive, ElementRef, Input, Renderer } from '@angular/core';
@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
constructor(el: ElementRef, renderer: Renderer) {
renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow');
}
}
This will set the host element background as yellow.
@ViewChild():
Access Child element by Ref or Class Object.
import {Component, OnInit, ViewChild, Renderer} from '@angular/core'; @Component({
moduleId: module.id,
selector: 'widget-three',
template: `<input type="text" #inputRef/>`
})
export class WidgetThree { @ViewChild('inputRef') input; constructor(private renderer: Renderer) {
} ngAfterViewInit(){
this.renderer.invokeElementMethod(
this.input.nativeElement,
'focus',
[]
);
}
}
Here we have a ref "inputRef", we use ref to access input element.
'invokeElementMethod' will call the 'focus' method the the input nativeElement which should be:
this.input.nativeElement.focus()
But the risk is on mobile it might have different method to focus on input, 'invokeElementMethod' can safely help us to call the method .
转自:http://www.cnblogs.com/Answer1215/p/5898545.html
ElementRef, @ViewChild & Renderer的更多相关文章
- [Angular 2] ElementRef, @ViewChild & Renderer
ElementRef: In Angular2 Doc, it suggest to "avoid" using ElementRef. It access DOM directl ...
- Angular ElementRef详解
一.为什么要用ElementRef Angular 的口号是 - "一套框架,多种平台.同时适用手机与桌面 (One framework.Mobile & desktop.)&quo ...
- angular ViewChild ContentChild 系列的查询参数
官方说明 官方文档 在调用 NgAfterViewInit 回调函数之前就会设置这些视图查询. 元数据属性: selector - 用于查询的指令类型或名字. read - 从查询到的元素中读取另一个 ...
- Angular 2 中的 ViewChild 和 ViewChildren
https://segmentfault.com/a/1190000008695459 ViewChild ViewChild 是属性装饰器,用来从模板视图中获取匹配的元素.视图查询在 ngAfter ...
- Angular 2 ViewChild & ViewChildren
一.ViewChild ViewChild 是属性装饰器,用来从模板视图中获取匹配的元素.视图查询在 ngAfterViewInit 钩子函数调用前完成,因此在 ngAfterViewInit 钩子函 ...
- [Angular 2] Set Properties on Dynamically Created Angular 2 Components
When you generate Angular 2 components, you’re still able to access the component instance to set pr ...
- [nodejs,expressjs,angularjs2] LOL英雄列表数据抓取及查询显示应用
新手练习,尝试使用angularjs2 [angularjs2 数据绑定,监听数据变化自动修改相应dom值,非常方便好用,但与传统js(jquery)的使用方法会很不同,Dom操作也不太习惯] 应用效 ...
- 开发Angular库的简单指导(译)
1. 最近工作上用到Angular,需要查阅一些英文资料,虽然英文非常烂,但是种种原因又不得不硬着头皮上,只是每次看英文都很费力,因此决定将一些比较重要的特别是需要反复阅读的资料翻译一下,以节约再次阅 ...
- 利用Angular实现多团队模块化SPA开发框架
0.前言 当一个公司有多个开发团队时,我们可能会遇到这样一些问题: 技术选项杂乱,大家各玩各 业务重复度高,各种通用api,登录注销,权限管理都需要重复实现(甚至一个团队都需要重复实现) 业务壁垒,业 ...
随机推荐
- 【WPF学习笔记】之如何设置下拉框读取SqlServer数据库的值:动画系列之(一)
先前条件:设置好数据库,需要三个文件CommandInfo.cs.DbHelperSQL.cs.myHelper.cs,需要修改命名空间,参照之前随笔http://www.cnblogs.com/Ow ...
- git 工具 - 子模块(submodule)
From: https://git-scm.com/book/zh/v2/Git-%E5%B7%A5%E5%85%B7-%E5%AD%90%E6%A8%A1%E5%9D%97 子模块 有种情况我们经常 ...
- java jdbc oracle ORA-01795: 列表中的最大表达式数为 1000
在操作SQL中存在In的数量如果超过1000条会提示 ORA-01795: 列表中的最大表达式数为 1000 归纳有几种方式出现的: 第一种是:我在上一个 [jdbc 同时执行 查询和删除操]作中 ...
- python 基础 5.2 类的继承
一. 类的继承 继承,顾名思议就知道是它的意思,举个例子说明,你现在有一个现有的A类,现在需要写一个B类,但是B类是A类的特殊版,我们就可以使用继承,B类继承A类时,B类会自动获得A类的所有属性和方法 ...
- WebStorm 调试JavaScript
WebStorm强大的调试JavaScript功能 Vue项目调试总结-WebStorm+Chrome调试 WebStorm+Chrome插件JetBrains IDE Support进行实时调试 W ...
- toggle不支持事件代理的解决办法或者 jquery live绑定toggle
$(".xxx").live("click", function () { $(this).toggle(function () {},functio ...
- 《avascript 高级程序设计(第三版)》 ---第三章 基本概念2
1.乘性操作符: 1)*法操作法: Infinity * 0 = NaN Infinity * 非零 = Infinity 或 - Infinity 2)/法操作符: Infinity / In ...
- BA模型 第10章
1.BA模型BA模型就是世界坐标到像素坐标的转换过程.这里多了一个去畸变.因为归一化平面坐标在转成像素坐标的过程中会出现畸变.这里只处理了径向畸变,径向畸变包括桶形失真和枕形失真,都是由于图像放大率随 ...
- 使用diff制作补丁【学习笔记】
源文件:main.c #include <stdio.h> int main() { printf("hello"); } 修改之后的文件: main1.c #incl ...
- POJ2774 Long Long Message —— 后缀数组 两字符串的最长公共子串
题目链接:https://vjudge.net/problem/POJ-2774 Long Long Message Time Limit: 4000MS Memory Limit: 131072 ...