用ngIf?单击外部指令

Question

如果点击在具体DOM元素之外，我使用以下指令来检测和隐藏块：

import {
Directive,
ElementRef,
Output,
EventEmitter,
HostListener
} from "@angular/core";
@Directive({
selector: "[clickOutside]"
})
export class ClickOutsideDirective {
constructor(private _elementRef: ElementRef) {}
@Output()
public clickOutside = new EventEmitter();
@HostListener("document:click", ["$event.target"])
public onClick(targetElement) {
const clickedInside = this._elementRef.nativeElement.contains(
targetElement
);
this.clickOutside.emit(clickedInside);
}
}

我已将此指令应用于元素：

<div class="action" (click)="open()">Open</div>
<div
class="search_content"
*ngIf="_searchContentOpen"
clickOutside
(clickOutside)="clickOutside($event)"
></div>

组件代码为：

open(): void {
this._searchContentOpen = !this._searchContentOpen;
}

问题是当我调用click时，我将this._searchContentOpen设置为true/false。

取决于它，我显示指令应用的块。但当ngIf起作用时，指令也总是步调一致。因此，结果块永远不会显示。

如何修复？

Answer 1

以下是我的两个选项：

1( 在触发时使用event.stopPropagation()

<div class="action" (click)="open(); $event.stopPropagation()">Open</div>

2( 仅在应用指令后处理点击

@Directive({
selector: '[clickOutside]'
})
export class ClickOutsideDirective implements OnInit {
@Output() clickOutside = new EventEmitter();
captured = false;
constructor(private elRef: ElementRef) { }
@HostListener('document:click', ['$event.target'])
onClick(target) {
if (!this.captured) {
return;
}
if (!this.elRef.nativeElement.contains(target)) {
this.clickOutside.emit();
};
}
ngOnInit() {
fromEvent(document, 'click', { capture: true }).pipe(take(1))
.subscribe(() => this.captured = true);
/* or
document.addEventListener('click', () => this.captured = true, { 
capture: true,
once: true
});
*/
}
}

Ng运行示例