如何从组件访问父HTML元素？

Question

就像问题一样 - 我有一个子组件,我想知道父元素的宽度是多少.我怎样才能做到这一点？

Answer 1

注入元素本身:

constructor(private elRef: ElementRef){}

访问本机元素父级:

ngOnInit() {
  console.log(this.elRef.nativeElement.parentElement);
}

它可以工作，但直接访问本机元素并不是一个好的做法。 (2认同)
@本·理查兹。假设您有两个这样的组件：`<parent><div><child></child></div></parent>`。如何从“ChildComponent”获取父组件的 DOM 元素？我知道我可以通过简单地将“ParentComponent”实例添加为构造函数参数来轻松获取子组件内的实例，但我不知道如何获取实际元素？ (2认同)

Answer 2

您可以通过查找this.elRef.closest与该父元素匹配的一些选择器来访问最近的父 DOM 元素

constructor(private elRef: ElementRef){}

ngOnInit() {
   const parentElement = this.elRef.closest('.parent-element-class')
}