如何获取Angular 2中的dom元素 [英] How to get dom element in angular 2
问题描述
我有一个具有p
元素的组件.其onClick
事件会将其更改为textarea
,以便用户可以编辑数据.我的问题是:
- 我怎样才能专注于文本区域?
- 如何到达元素,以便可以在其上应用.focus()?
- 我可以避免使用document.getElemenntById()吗?
我尝试使用"ElementRef"和"@ViewChild()",但是似乎我缺少了一些东西:
// ------ THE CLASS
@ViewChild('tasknoteId') taskNoteRef:ElementRef;
noteEditMode: boolean = false;
get isShowNote (){
return !this.noteEditMode && this.todo.note ? true : false;
}
taskNote: string;
toggleNoteEditMode () {
this.noteEditMode = !this.noteEditMode;
this.renderer.invokeElementMethod(this.taskNoteRef.nativeElement,'focus');
}
// ------ THE COMPONENT
<span class="the-insert">
<form [hidden]="!noteEditMode && todo.note">
<textarea #tasknoteId id="tasknote"
name="tasknote"
[(ngModel)]="todo.note"
placeholder="{{ notePlaceholder }}"
style="background-color:pink"
(blur)="updateNote()" (click)="toggleNoteEditMode()"
[autofocus]="noteEditMode"
[innerHTML]="todo.note">
</textarea>
</form>
</span>
将 ViewChild 与 #localvariable 一起使用,如下所示,
<textarea #someVar id="tasknote"
name="tasknote"
[(ngModel)]="taskNote"
placeholder="{{ notePlaceholder }}"
style="background-color: pink"
(blur)="updateNote() ; noteEditMode = false " (click)="noteEditMode = false"> {{ todo.note }}
</textarea>
在组件中,
最古老的方式
import {ElementRef} from '@angular/core';
@ViewChild('someVar') el:ElementRef;
ngAfterViewInit()
{
this.el.nativeElement.focus();
}
旧方式
import {ElementRef} from '@angular/core';
@ViewChild('someVar') el:ElementRef;
constructor(private rd: Renderer) {}
ngAfterViewInit() {
this.rd.invokeElementMethod(this.el.nativeElement,'focus');
}
已于2017年3月22日更新
新方式
请注意 Angular v4.0.0-rc.3(2017-03-10)中的几处更改.
由于Angular小组将弃用 invokeElementMethod
,因此不再可以使用以上代码.
突破性变化
从4.0 rc.1开始:
将RendererV2重命名为Renderer2
将RendererTypeV2重命名为RendererType2
将RendererFactoryV2重命名为RendererFactory2
import {ElementRef,Renderer2} from '@angular/core';
@ViewChild('someVar') el:ElementRef;
constructor(private rd: Renderer2) {}
ngAfterViewInit() {
console.log(this.rd);
this.el.nativeElement.focus(); //<<<=====same as oldest way
}
console.log(this.rd)
将为您提供以下方法,您现在可以看到 invokeElementMethod
不存在. 尚未记录img.
注意::您可以将 Rendere2
的以下方法与 ViewChild变量一起使用,也可以不使用.
I have a component that has a p
element. Its onClick
event will change it to a textarea
so the user can edit the data. My question is:
- How I can the make the focus on the textarea?
- How I can reach the element so I can appy the .focus() on it?
- Can I avoid using document.getElemenntById() ?
I have tried to use the "ElementRef" and the "@ViewChild()" however it seems that I'm missing something:
// ------ THE CLASS
@ViewChild('tasknoteId') taskNoteRef:ElementRef;
noteEditMode: boolean = false;
get isShowNote (){
return !this.noteEditMode && this.todo.note ? true : false;
}
taskNote: string;
toggleNoteEditMode () {
this.noteEditMode = !this.noteEditMode;
this.renderer.invokeElementMethod(this.taskNoteRef.nativeElement,'focus');
}
// ------ THE COMPONENT
<span class="the-insert">
<form [hidden]="!noteEditMode && todo.note">
<textarea #tasknoteId id="tasknote"
name="tasknote"
[(ngModel)]="todo.note"
placeholder="{{ notePlaceholder }}"
style="background-color:pink"
(blur)="updateNote()" (click)="toggleNoteEditMode()"
[autofocus]="noteEditMode"
[innerHTML]="todo.note">
</textarea>
</form>
</span>
Use ViewChild with #localvariable as shown here,
<textarea #someVar id="tasknote"
name="tasknote"
[(ngModel)]="taskNote"
placeholder="{{ notePlaceholder }}"
style="background-color: pink"
(blur)="updateNote() ; noteEditMode = false " (click)="noteEditMode = false"> {{ todo.note }}
</textarea>
In component,
OLDEST Way
import {ElementRef} from '@angular/core';
@ViewChild('someVar') el:ElementRef;
ngAfterViewInit()
{
this.el.nativeElement.focus();
}
OLD Way
import {ElementRef} from '@angular/core';
@ViewChild('someVar') el:ElementRef;
constructor(private rd: Renderer) {}
ngAfterViewInit() {
this.rd.invokeElementMethod(this.el.nativeElement,'focus');
}
Updated on 22/03(March)/2017
NEW Way
Please note from Angular v4.0.0-rc.3 (2017-03-10) few things have been changed.
Since Angular team will deprecate invokeElementMethod
, above code no longer can be used.
BREAKING CHANGES
since 4.0 rc.1:
rename RendererV2 to Renderer2
rename RendererTypeV2 to RendererType2
rename RendererFactoryV2 to RendererFactory2
import {ElementRef,Renderer2} from '@angular/core';
@ViewChild('someVar') el:ElementRef;
constructor(private rd: Renderer2) {}
ngAfterViewInit() {
console.log(this.rd);
this.el.nativeElement.focus(); //<<<=====same as oldest way
}
console.log(this.rd)
will give you following methods and you can see now invokeElementMethod
is not there. Attaching img as yet it is not documented.
NOTE: You can use following methods of Rendere2
with/without ViewChild variable to do so many things.
这篇关于如何获取Angular 2中的dom元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!