我的应用程序的结构如下:

<nav></nav>
<router-outlet></router-outlet>
<footer></footer>


在路由器插座中,基于路由,我有不同的组件。在其中的一些页面中,我需要访问导航或页脚的DOM元素,以获取诸如pageYOffset,height等用于粘性定位的信息。我知道诸如ViewChild,Renderer2和ElementRef之类的东西,但不确定如何工作。我要创建服务吗?看起来像什么?

最佳答案

假设子组件的类型为NavComponentFooterComponent,则可以在@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;
}




注意:您可能需要将displaynav组件的footer样式属性设置为blockinline-block,以获取相应元素的位置和大小。

关于javascript - 如何访问Angular中另一个组件的DOM元素?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52952399/

10-09 20:39
查看更多