在Angular中,ViewChild用于获取对子组件,指令或DOM元素的引用。它需要选择器来引用DOM元素或组件,这些选择器可以是组件选择器或查询选择器。组件选择器是组件类的引用,而查询选择器则是类似于CSS选择器的字符串。
组件选择器的用法如下:
import { Component, ViewChild } from '@angular/core';
import { MyComponent } from './my.component';
@Component({
selector: 'app-parent',
template: `
`
})
export class ParentComponent {
@ViewChild(MyComponent)
private myComponent: MyComponent;
}
在上面的代码中,我们使用了组件选择器来获取MyComponent实例的引用。这个实例可以用来执行MyComponent中的方法或读取其属性。
查询选择器的用法如下:
import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
`
})
export class ParentComponent {
@ViewChild('myDiv')
private myDiv: ElementRef;
}
在上面的代码中,我们使用了查询选择器来获取myDiv元素的引用。这个引用可以用来操纵DOM。
总的来说,区别在于组件选择器用于获取组件实例的引用,而查询选择器用于获取DOM元素的引用。