单击datepicker时，ElementRef NativeElement是否会更改？

Question

我有一个指令，当我点击我的角度2日历之外时，我期望触发该指令。

指令是：

    import {Directive, ElementRef, Output, EventEmitter, HostListener} from 
     '@angular/core';

     @Directive({
    selector: '[clickOutside]'
      })
    export class ClickOutsideDirective {
    constructor(private _elementRef: ElementRef) {
    }

    @Output()
    public clickOutside = new EventEmitter<MouseEvent>();

    @HostListener('document:click', ['$event', '$event.target'])
    public onClick(event: MouseEvent, targetElement: HTMLElement): void {
        if (!targetElement) {
            return;
        }

        const clickedInside = this._elementRef.nativeElement.contains(targetElement);
        if (!clickedInside) {
            this.clickOutside.emit(event);
        }
    }
   }

我的日期选择器是

 <div [hidden]="!isDatepickerOneVisible" class="datepicker-container"
    (clickOutside)="close($event)">
                    <datepicker [(ngModel)]="model.from" [minDate]="minDate" name="datepicker" (selectionDone)="onDateSelectionOneDone($event)">
                    </datepicker>
                  </div>
                </div>

我希望在点击日期选择器之外时触发关闭功能。

我正在检查

this._elementRef.nativeElement.contains（targetElement）;

在这种情况下.target元素将在我点击的位置，而native元素是我放置指令属性的div。

但是当我点击日期选择器中的月/年选择器时，当我点击日期选择器时UI将会改变（如果我选择月选择器，它将带我到列出所有月份的日期选择器页面）。我期待的是始终让Native Element保持一致。但是当我选择月选择器/年选择器时，本机元素内部部分（日期选择器部分正在变化）。这将导致我的逻辑出现问题。

我应该将native元素作为放置directive属性的当前元素的位置。当我点击月/年选择器时，它不应该改变。

如何解决这个问题？

而不是使用

constructor(private _elementRef: ElementRef)

我们可以从UI传递_elementRef.nativeElement吗？

点击2017年6月（月选择器）

时查看

我希望原生元素应该包含第一张图片中显示的日期选择器部分。

但是在我的原生元素中反而没有得到图片1中的内容，我得到了图片2中的内容。