有人知道如何获取组件模板中定义的元素吗?聚合物让$和$$变得很容易。
我只是想知道如何在Angular中实现它。
以教程中的例子为例:
import {Component} from '@angular/core';
@Component({
selector:'display',
template:`
<input #myname (input)="updateName(myname.value)"/>
<p>My name : {{myName}}</p>
`
})
export class DisplayComponent {
myName: string = "Aman";
updateName(input: String) {
this.myName = input;
}
}
我如何从类定义中捕获或获得p或输入元素的引用?
当前回答
我用了两种方法:
第一种方法:
你可以通过ElementRef将DOM元素的句柄注入到组件的构造函数中:
constructor(private myElement: ElementRef) {
this.myElement.nativeElement // <- your direct element reference
}
第二种方式:
@Component({
selector: 'my-app',
template:
`
<input #input value="enterThere">
`,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
@ViewChild('input') input:ElementRef;
ngAfterViewInit() {
console.log(this.input);
}
其他回答
要获得紧邻的下一个兄弟姐妹，使用这个
event.source._elementRef.nativeElement.nextElementSibling
我用了两种方法:
第一种方法:
你可以通过ElementRef将DOM元素的句柄注入到组件的构造函数中:
constructor(private myElement: ElementRef) {
this.myElement.nativeElement // <- your direct element reference
}
第二种方式:
@Component({
selector: 'my-app',
template:
`
<input #input value="enterThere">
`,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
@ViewChild('input') input:ElementRef;
ngAfterViewInit() {
console.log(this.input);
}
*/
import {Component,ViewChild} from '@angular/core' /*Import View Child*/
@Component({
selector:'display'
template:`
<input #myname (input) = "updateName(myname.value)"/>
<p> My name : {{myName}}</p>
`
})
export class DisplayComponent{
@ViewChild('myname')inputTxt:ElementRef; /*create a view child*/
myName: string;
updateName: Function;
constructor(){
this.myName = "Aman";
this.updateName = function(input: String){
this.inputTxt.nativeElement.value=this.myName;
/*assign to it the value*/
};
}
}
快速使用的最小示例:
import { Component, ElementRef, ViewChild} from '@angular/core';
@Component({
selector: 'my-app',
template:
`
<input #inputEl value="hithere">
`,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
@ViewChild('inputEl') inputEl:ElementRef;
ngAfterViewInit() {
console.log(this.inputEl);
}
}
在感兴趣的DOM元素上放置一个模板引用变量。在我们的例子中，这是<input>标签上的#inputEl。 在组件类中，通过@ViewChild装饰器注入DOM元素 访问ngAfterViewInit生命周期钩子中的元素。
注意:
如果你想操作DOM元素，请使用Renderer2 API而不是直接访问元素。允许直接访问DOM会使应用程序更容易受到XSS攻击
注意:这并不适用于Angular 6及以上版本，因为ElementRef变成了ElementRef<T>， T表示nativeElement的类型。
我想补充一点，如果您正在使用ElementRef，正如所有答案所推荐的那样，那么您将立即遇到一个问题，即ElementRef有一个看起来很糟糕的类型声明
export declare class ElementRef {
nativeElement: any;
}
这在一个nativeElement是HTMLElement的浏览器环境中是愚蠢的。
要解决这个问题，您可以使用以下技术
import {Inject, ElementRef as ErrorProneElementRef} from '@angular/core';
interface ElementRef {
nativeElement: HTMLElement;
}
@Component({...}) export class MyComponent {
constructor(@Inject(ErrorProneElementRef) readonly elementRef: ElementRef) { }
}
