输出事件不会触发对组件的操作

Question

修改： Plunker example

编辑2： Plunker帖子与实际代码之间的差异似乎是clickOutside事件在后者中没有附加观察者。

当用户在Angular4应用程序中单击组件外部时，我需要实现一种关闭模式的方法。为实现这一点，我创建了一个简单的ClickOutside指令帽，当发生这样的点击时，应该触发组件上的closeModal方法。发出事件，但不会调用该方法。

ClickOutside 指令：

@Directive({
    selector: '[clickOutside]'
})
export class ClickOutsideDirective {

    constructor(
        private elementRef: ElementRef
    ) { }

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

    @HostListener('document:click', ['$event.target'])
    public onClick(targetElement) {
        let clickedInside = this.elementRef.nativeElement.contains(targetElement);
        if (!clickedInside) {
            this.clickOutside.emit();
        }
    }
}

模板：

<div (clickOutside)="closeModal()">
// some more HTML

上述模板所属的组件：

@Component({
    selector: 'foobar',
    templateUrl: './foobar.component.html',
    styleUrls: ['./foobar.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class FoobarComponent {

    // some more code

    closeModal() : void {
        this.showModal = false;
    }

}

我在这里缺少什么？我忘记了什么吗？提前谢谢！