在不使用 nativeElement 的情况下从 @ViewChild 读取元素

Question

Is there anyway to get the underlying div element on a @ViewChild ? I have tried to read the following of which none work:

• ElementRef.prototype.nativeElement -- returns ElementRef
• HTMLDivElement -- returns undefined
• ElementRef -- returns ElementRef

I am trying to do this so I can do without having to call nativeElement in every call to the content property.

Here is what I am doing (replacing the read with an item from the list above):

  @ViewChild('overlayContent', { read: ElementRef.prototype.nativeElement })
  content?: HTMLDivElement;

<div class="slide-over-content" #overlayContent>
  <!-- content -->
</div>

Answer 1

The common pattern is to use a setter if one more level of abstraction is needed between an ElementRef and its property.

 @ViewChild('overlayContent')
    set aRef(ref: ElementRef) {
      this.myDomElement = ref.nativeElement;
    }