Angular 2 获取 mat-dialog-container nativeelement

Question

我正在使用 angular 2 material mat-dialogs。现在我想访问 mat-dialog-container 原生元素。

let nElem = this.dialogRef._containerInstance._elementRef.nativeElement;

当我尝试如上所述访问 native 元素时，出现错误“Property _elementRef”是私有(private)的，只能在“MatDialogContainer”类中访问

示例:- https://stackblitz.com/edit/angular-z5mgjl

Answer 1

获取 Mat Dialog native 元素的一种简单方法是使用 ViewContainerRef。据我了解，在构造函数中使用时 ViewContainerRef 将获得该组件的容器的引用。在您的情况下，它将是 Mat Dialog Container。

以下工作:

import { ViewContainerRef } from '@angular/core';


constructor(private _ViewContainerRef: ViewContainerRef) { 

}

ngOnInit() {
  let matDialogContainerRef = this._ViewContainerRef.element.nativeElement;
}

在另一个有趣的注意事项上，这可用于轻松识别单击是发生在对话框内部还是外部。

@HostListener('document:click', ['$event'])
clickout(event) {
  if(this.vcRef.element.nativeElement.contains(event.target)) {
    alert('Clicked inside');
  } else {
    alert('Clicked outside');
  }
}