不必注入ElementRef
并从那里使用querySelector
或类似的方法,而是可以直接使用声明式方式来访问视图中的元素:
<input #myname>
@ViewChild('myname') input;
元素
ngAfterViewInit() {
console.log(this.input.nativeElement.value);
}
StackBlitz示例
后代
@ContentChildren()
是唯一一个允许您查询后代的方法。
@ContentChildren(SomeTypeOrVarName, {descendants: true}) someField;
`{descendants: true}`应该是默认值,但在2.0.0最终版本中不是,并且被认为是一个错误。
这个问题已在2.0.1中修复。
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);
}
ngAfterContentInit() {
var div = this.elRef.nativeElement.querySelector('div');
console.log(div);
}
}
获取任意投影内容
查看
访问被引用的内容
input
也是一个ElementRef
,但你可以获取到你实际想要的元素的引用,而不是从宿主ElementRef
查询它。 - Günter ZöchbauerElementRef
是没问题的。同时,使用带有Renderer
的ElementRef.nativeElement
也是可以的。被不鼓励的是直接访问ElementRef.nativeElement.xxx
属性。 - Günter ZöchbauerElementRef.nativeElement
的属性和方法)会阻止您使用Angular的服务器端渲染和WebWorker功能(我不知道它是否也会破坏即将推出的离线模板编译器 - 但我猜不会)。 - Günter Zöchbauer@ViewChild('myObj', { read: ElementRef }) myObj: ElementRef;
- jsgoupil