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

Question

与问题类似 - 我有一个子组件，我想知道父元素的宽度。我该怎么做？

- uksz

---

除非在构建时知道父组件类型，否则没有 Angular 的方法，然后可以将其注入到子组件的构造函数中。 - Günter Zöchbauer

https://dev59.com/7FgR5IYBdhLWcg3wk96d?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa - Jens Alenius

Answer 1

注入元素本身：

constructor(private elRef: ElementRef){}

访问当前元素的父级元素：

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

- michael

---

它可以工作，但是直接访问本地元素并不是一个好的实践。 - Ben Richards

@BenRichards。假设您有两个组件，如下所示：<parent><div><child></child></div></parent>。您如何从ChildComponent获取父级的DOM元素？我知道我可以通过将其添加为构造函数参数来轻松地在子级内获取ParentComponent实例，但我不知道如何获取实际的元素？ - Robert Koritnik

我已经尝试过这个，但它没有检索到计算出的父级style。 - JSmith

Answer 2

你可以通过使用this.elRef.closest和匹配该父元素的一些选择器来访问最近的父DOM元素。

constructor(private elRef: ElementRef){}

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

- Anton Pegov

---

最接近的功能不受Internet Explorer支持，因此... - Carnaru Valentin

Internet Explorer已经过时。 - Anton Pegov

你错过了一个 nativeElement this.elRef.nativeElement.closest('view-area-view') - sandroid