要在Angular中使用内容查询(Content Query),可以使用@ContentChild或@ContentChildren装饰器来获取模板插座内的元素。
示例代码如下:
这是子组件中的元素
// child.component.ts
import { Component, ContentChild } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent {
@ContentChild('myElement') myElement: ElementRef;
}
这是父组件中的元素
// parent.component.ts
import { Component, ViewChild, AfterContentInit } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent implements AfterContentInit {
@ViewChild(ChildComponent) childComponent: ChildComponent;
ngAfterContentInit() {
console.log(this.childComponent.myElement.nativeElement);
}
}
通过以上代码,你可以在父组件中获取到子组件中的元素,并对其进行操作。