要在外部组件的控制器中获取内部组件的DOM元素,可以使用ViewChild装饰器来实现。ViewChild装饰器允许我们在组件中获取对另一个组件、指令或原生元素的引用。
以下是一个示例,展示了在外部组件的控制器中如何获取内部组件的DOM元素:
内部组件:
import { Component } from '@angular/core';
@Component({
selector: 'app-inner',
template: 'Inner Component',
})
export class InnerComponent {}
外部组件:
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { InnerComponent } from './inner.component';
@Component({
selector: 'app-outer',
template: `
Outer Component
`,
})
export class OuterComponent implements AfterViewInit {
@ViewChild('innerElement') innerElement: ElementRef;
ngAfterViewInit() {
console.log(this.innerElement.nativeElement);
}
}
在上面的代码中,我们在OuterComponent中使用ViewChild装饰器来获取InnerComponent的DOM元素。@ViewChild('innerElement') innerElement: ElementRef; 表示我们希望获取具有名为'innerElement'的引用。然后,我们在ngAfterViewInit生命周期钩子中打印出内部组件的DOM元素。
请注意,为了使用ViewChild装饰器,你需要从@angular/core中导入ViewChild和ElementRef。
希望这个示例能帮助到你!