@HostListener('document:click', ['$event.target'])
public onClick(target) {
  console.log(target)
}
constructor(private _elementRef: ElementRef) {}

<componentA>
  <componentB />
</componentA>

import { HostListener } from '@angular/core'; // 以及来自 /core 的其他模块
(...)
constructor(private elem: ElementRef) {}
@HostListener('document:click', ['$event'])
docClicked(event: Event) {
    if (this.elem.nativeElement.contains(event.target))
        console.log('点击在内部');
    else {
        console.log('点击在外部');
    }
}
然后你可以在 docClicked/else 块中执行你想要的操作。
检查 [stackblitz 示例][1] 以发射到父组件方法，该方法将设置控制在父模板中显示子组件的变量为 false。
[1]: https://stackblitz.com/edit/angular-ivy-urtm6r?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fchild%2Fchild.component.ts
<details>
<summary>英文:</summary>
You need to explicitely check for the clicked DOM element, because listening to click on `document` will always treat the click as targetting the document as a whole (which is rather obvious). So you need to import `ElementRef` into child component and use it to check if the child is the actual target of the click:
     import { HostListener } from &#39;@angular/core&#39;; // and other modules from /core
     
     (...)
     constructor(private elem: ElementRef) {}
     @HostListener(&#39;document:click&#39;, [&#39;$event&#39;])
     docClicked(event: Event) {
        if (this.elem.nativeElement.contains(event.target))
           console.log(&#39;clicked inside&#39;);
        else {
           console.log(&#39;clicked outside&#39;);
        }
     }
Then you can do what you want in the docClicked/else block. 
Check [stackblitz example][1] for emitting to parent method that will set to false the var that controls the display of the child component in the parent template. 
  [1]: https://stackblitz.com/edit/angular-ivy-urtm6r?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fchild%2Fchild.component.ts
</details>
# 答案2
**得分**: 0
我注意到除了获取父组件而不是子组件之外，在生产环境中`document`会返回undefined，为了修复这两个问题，使用了以下代码：
    import { Inject, ElementRef } from '@angular/core';
    import { DOCUMENT } from '@angular/common';
    this.isOpened: boolean = false;
    constructor(
     @Inject(DOCUMENT) private _document: Document,
     private _elementRef: ElementRef
    ) {}
    ngOnInit(): void {
     this._handleOnDocumentClick();
    }
    ngOnDestroy(): void {
     this.removeEventListener('click', this._handleOnDocumentClick, true)
    }
    private _handleOnDocumentClick(): void {
     this._document.addEventListener('click', (event: Event) => {
       event.composedPath().includes(this._elementRef.nativeElement)
         ? this.isOpened = !this.isOpened
         : this.isOpened = false;
     });
    }
<details>
<summary>英文:</summary>
I noticed that in addition to being getting the parent component and not the child, in production the `document` was giving undefined, so to correct both, the following code was used:
    import { Inject, ElementRef } from &#39;@angular/core&#39;;
    import { DOCUMENT } from &#39;@angular/common&#39;;
    
    this.isOpened: boolean = false;
    
    constructor(
     @Inject(DOCUMENT) private _document: Document,
     private _elementRef: ElementRef
    ) {}
    
    ngOnInit(): void {
     this._handleOnDocumentClick();
    }
    
    ngOnDestroy(): void {
     this.removeEventListener(&#39;click&#39;, this._handleOnDocumentClick, true)
    }
    
    private _handleOnDocumentClick(): void {
     this._document.addEventListener(&#39;click&#39;, (event: Event) =&gt; {
       event.composedPath().includes(this._elementRef.nativeElement)
         ? this.isOpened = !this.isOpened
         : this.isOpened = false;
     });
    }
</details>