我的应用程序的结构如下:
<nav></nav>
<router-outlet></router-outlet>
<footer></footer>
在路由器插座中,基于路由,我有不同的组件。在其中的一些页面中,我需要访问导航或页脚的DOM元素,以获取诸如pageYOffset,height等用于粘性定位的信息。我知道诸如ViewChild,Renderer2和ElementRef之类的东西,但不确定如何工作。我要创建服务吗?看起来像什么?
最佳答案
假设子组件的类型为NavComponent
和FooterComponent
,则可以在@ViewChild(..., { read: ElementRef })
中使用ngAfterViewInit
检索相应的DOM元素:
@ViewChild(NavComponent, { read: ElementRef }) private navElementRef: ElementRef;
@ViewChild(FooterComponent, { read: ElementRef }) private footerElementRef: ElementRef;
ngAfterViewInit() {
const navElement = this.navElementRef.nativeElement;
const footerElement = this.footerElementRef.nativeElement;
...
}
有关演示,请参见this stackblitz。
可以通过简单的服务使这些元素可被应用程序的其他部分访问:
export class AppElementsService {
public navElement: HTMLElement;
public footerElement: HTMLElement;
}
并在应用程序组件中设置:
@ViewChild(NavComponent, { read: ElementRef }) private navElementRef: ElementRef;
@ViewChild(FooterComponent, { read: ElementRef }) private footerElementRef: ElementRef;
constructor(private appElementsService: AppElementService) { }
ngAfterViewInit() {
this.appElementsService.navElement = this.navElementRef.nativeElement;
this.appElementsService.footerElement = this.footerElementRef.nativeElement;
}
注意:您可能需要将
display
和nav
组件的footer
样式属性设置为block
或inline-block
,以获取相应元素的位置和大小。关于javascript - 如何访问Angular中另一个组件的DOM元素?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52952399/