如何选择组件模板中的元素?
有人知道如何获取组件模板中定义的元素吗?Polymer 借助
$
和
$$
让获取元素变得非常简单。
我只是想知道如何在 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
或
input
元素的引用?
无需注入
ElementRef
并从那里使用
querySelector
或类似方法,而是可以使用声明性方式直接访问视图中的元素:
<input #myname>
@ViewChild('myname') input;
元素
ngAfterViewInit() {
console.log(this.input.nativeElement.value);
}
- @ViewChild() 支持指令或组件类型作为参数,或模板变量的名称(字符串)。
-
@ViewChildren()
还支持以逗号分隔的名称列表(当前不允许使用空格
@ViewChildren('var1,var2,var3')
)。 -
@ContentChild()
和
@ContentChildren()
执行相同的操作,但在 light DOM 中(
<ng-content>
投影元素)。
descendants
@ContentChildren()
是唯一允许您查询后代的函数
@ContentChildren(SomeTypeOrVarName, {descendants: true}) someField;
read
如果存在组件和指令,则
read
参数允许您指定应返回哪个实例。
例如,动态创建的组件所需的
ViewContainerRef
而不是默认值
ElementRef
@ViewChild('myname', { read: ViewContainerRef }) target;
订阅更改
尽管仅在调用
ngAfterViewInit()
时设置视图子项,仅在调用
ngAfterContentInit()
时设置内容子项,但如果要订阅查询结果的更改,则应在
ngOnInit()
中完成。
https://github.com/angular/angular/issues/9689#issuecomment-229247134
@ViewChildren(SomeType) viewChildren;
@ContentChildren(SomeType) contentChildren;
ngOnInit() {
this.viewChildren.changes.subscribe(changes => console.log(changes));
this.contentChildren.changes.subscribe(changes => console.log(changes));
}
直接访问 DOM
只能查询 DOM 元素,不能查询组件或指令实例:
export class MyComponent {
constructor(private elRef:ElementRef) {}
ngAfterViewInit() {
var div = this.elRef.nativeElement.querySelector('div');
console.log(div);
}
// for transcluded content
ngAfterContentInit() {
var div = this.elRef.nativeElement.querySelector('div');
console.log(div);
}
}
获取任意投影内容
请参阅 访问嵌入内容
您可以通过将
ElementRef
注入到组件的构造函数中来获取 DOM 元素的句柄:
constructor(private myElement: ElementRef) { ... }
文档: https://angular.io/docs/ts/latest/api/core/index/ElementRef-class.html
import { Component, ElementRef, OnInit } from '@angular/core';
@Component({
selector:'display',
template:`
<input (input)="updateName($event.target.value)">
<p> My name : {{ myName }}</p>
`
})
class DisplayComponent implements OnInit {
constructor(public element: ElementRef) {
this.element.nativeElement // <- your direct element reference
}
ngOnInit() {
var el = this.element.nativeElement;
console.log(el);
}
updateName(value) {
// ...
}
}
示例已更新,以适用于最新版本
有关原生元素的更多详细信息,请访问 此处