- 综合排序
- 最热优先
- 最新优先
- ` }) export class AppComponent(){ @ViewChild('greet') greetDiv: ElementRef construcor(private elementRef: ElementRef, private renderer: Renderer) { : ElementRef; abstract createEmbeddedView(context: C): EmbeddedViewRef<C>; } templateRef来自专栏奔跑的蛙牛技术博客
ElementRef & TemplateRef & ViewContainerRef
新手有点疑惑，索性查查资料总结一下和ng相关的几个和DOM相关的几个概念 ElementRef 由于ng是跨平台的为了减少视图层和渲染层的耦合也为了让ng更适应多平台，ng帮我们封装了ElementRef ，我们可以通过ElementRef拿到native元素(在浏览器中也就是我们常说的DOM元素) 下面我们看一段代码 import { Component, ElementRef, AfterViewInit
1.5K20发布于 2018-09-05
Angular ElementRef 简介
下面我们就来分析一下 ElementRef 类： ElementRef 的作用 在应用层直接操作 DOM，就会造成应用层与渲染层之间强耦合，导致我们的应用无法运行在不同环境，如 web worker 中 ElementRef 的定义 // angular-master/packages/core/src/linker/element_ref.ts export class ElementRef<T = : ElementRef) { let divEle = this.elementRef.nativeElement.querySelector('div'); console.dir( 沉思中… ，不是有 setTimeout 么，我们在稍微改造一下： constructor(private elementRef: ElementRef) { setTimeout(() => { = elementRef 是可选的，编译时会自动赋值 // function AppComponent(elementRef) { this.elementRef = elementRef; }
Angular 自定义指令 Tooltip
然后，在 javascript 文件 tooltip.component.ts 内容如下： import { Component, ElementRef, // 元素指向 HostBinding : string; constructor( private elementRef: ElementRef ) { } ngOnInit(): void { this.hostStyleTop ComponentFactoryResolver, // 创建组件对象 ComponentRef, // 组件实例的关联和指引，指向 ComponentFactory 创建的元素 Directive, ElementRef (); } constructor( protected elementRef: ElementRef, protected appRef: ApplicationRef, this.componentRef.instance.data = { // 绑定 data 数据 content: this.appTooltip, element: this.elementRef.nativeElement
angular获取dom元素
方式一: ViewChild
@ViewChild('box') box: ElementRef; constructor(){ // 不能放在构造函数里面这个时候构造函数中还没有视图没法获取到 box元素 } ngOnInit() { console.log(this.box.nativeElement); } 方式二: ElementRef constructor(private el:ElementRef){ // 同理 } ngOnInit(){ console.log(this.el.nativeElement);Angular DOM 抽象概述
ElementRef 在日常工作中，Web 工程师经常需要跟 DOM 打交道。 因此引入 ElementRef 类主要目的是为了实现跨平台。 : ElementRef) { console.log(this.elementRef); } } 以上代码运行后，控制台的输出结果： ElementRef {nativeElement: : ElementRef) { console.log(this.elementRef); } } 以上代码运行后，控制台的输出结果： ElementRef {nativeElement: , context)); } get elementRef(): ElementRef { return new ElementRef(asElementData(this.
Angular开发实践（七）： 跨平台操作DOM及渲染器Renderer2
此外还定义了以下引用类型：ElementRef、TemplateRef、ViewRef 、ComponentRef 和 ViewContainerRef 等。 为了演示，先定义一个组件DemoComponent： import { AfterViewInit, Component, ElementRef, Renderer2, ViewChild } from > ` }) export class DemoComponent implements AfterViewInit { @ViewChild('demoDiv') demoDiv: ElementRef @ViewChild @ViewChild('demoDiv') demoDiv: ElementRef; // @ViewChild通过模板变量名获取 ngAfterViewInit() { 对象，ElementRef 定义如下： class ElementRef<T> { constructor(nativeElement: T) nativeElement: T } 因此我们可以在
Angular2 之 属性型指令Angular指令可分为三种创建一个属性型指令 -- 初级应用响应用户引发的事件 -- 高级应用
创建一个属性型指令 -- 初级应用 自己创建属性型指令的必要条件： import { Directive, ElementRef, Input, Renderer } from '@angular/core '; @Directive({ selector: '[myHighlight]' }) export class HighlightDirective { constructor(el: ElementRef ElementRef注入到指令构造函数中。 这样代码可以访问 DOM 元素。 Input将数据从绑定表达式传达到指令中。 Renderer让代码可以改变 DOM 元素的样式。 **ElementRef是一个服务，它赋予我们通过它的nativeElement属性直接访问 DOM 元素的能力。 ** Renderer服务允许通过代码设置元素的样式。
Angular 自定义属性指令
现在我们先来定义 CreditCardDirective： import { Directive, ElementRef } from '@angular/core'; @Directive({ selector: '[credit-card]' }) export class CreditCardDirective { constructor(private element: ElementRef red'; } 此时，CreditCardDirective 指令的功能已基本完成，下面是完整的实现： import { Directive, HostListener, HostBinding, ElementRef 下面我们来定义 TooltipDirective 指令： import { Input, Directive, ElementRef, OnInit } from '@angular/core'; @ ) {} } 接着我们按照上述的方案，更新一下 TooltipDirective 指令： import { Input, Directive, ElementRef, OnInit } from
React ref & useRef 完全指南，原来这么用！
这需要三个步骤: 定义访问元素const elementRef = useRef()的引用; 将引用赋给元素的ref属性:<div ref={elementRef}>
【指令篇】ionic3自适应大小textarea指令
假如对指令有所了解了，那首先创建一个指令： ionic g directive autosize 打开文件编辑： import { Directive, ElementRef, HostListener onInput(textArea:HTMLTextAreaElement):void { this.adjust(); } constructor(public element:ElementRef
【指令篇】键盘附着指令调整软键盘
ionic-native/keyboard --save 然后创建指令： ionic g directive keyboardAttach 然后打开文件，修改为： import { Directive, ElementRef onShowSubscription: Subscription; private onHideSubscription: Subscription; constructor( private elementRef : ElementRef, private keyboard: Keyboard, private platform: Platform ) {} ngOnInit() { onHide() { this.setElementPosition(0); }; private setElementPosition(pixels: number) { this.elementRef.nativeElement.style.paddingBottom
ionic3应该善用组件和指令
在构造函数constructor加上一句，赋值默认颜色： import { Directive, Input, ElementRef } from '@angular/core'; @Directive this.el.nativeElement.style.backgroundColor = 'red'; } } 基于安全性考虑，angualr2的文档是建议用Renderer来代替ElementRef 那我们这样修改： import { Directive, Input, ElementRef } from '@angular/core'; @Directive({ selector: '[bg-color 为实现该功能，我们需要在事件处理函数上添加@HostListener装饰器，代码改动如下： import { Directive, Input, ElementRef, HostListener } (color:string){ this.setStyle(color); this.bgColor = color; }; constructor(private el: ElementRef
Angular constructor vs ngOnInit
import { Component, ElementRef } from '@angular/core'; @Component({ selector: 'my-app', template p>Hello {{name}}
`, }) export class AppComponent { name: string = ''; constructor(public elementRef : ElementRef) { // 使用构造注入方式注入依赖对象 this.name = 'Semlinker'; // 执行数据初始化操作 } } ngOnInit 应用场景 在项目开发中我们要尽量保持构造函数简单明了Seam Carving demo
Original" /> <canvas #canvasRef id='myCanvas'> </canvas> @ViewChild('imgRef', { static: false }) imgRef: ElementRef ; @ViewChild('canvasRef', { static: false }) canvasRef: ElementRef; const srcImg: HTMLImageElement | myImg' [src]="imageSrc" alt="Original" />
