angular中隐藏内容

Question

angular中点击其他地方或空白地方的时候，如何把某块显示的内容隐藏掉

Answer 1

import {..., Renderer2} from '@angular/core';
declare let $: any;

<div *ngIf="toolVerShow" class="planner-box">
  点击空白处隐藏
</div>
<button (click)="btnShow()">显示内容</button>

toolVerShow = false;
constructor(protected service: CollectViewService,
                protected store$: Store<AppState>,
                protected router?: Router,
                protected activatedRoute?: ActivatedRoute,
                protected renderer?: Renderer2) {
        super(store$);
        this.module = this.service.getModule();
        this.renderer && this.renderer.listen('window', 'click',(e: Event) => {
            let divTop = $('.planner-box'); // 要隐藏的父标签
            if (!divTop.is(e.target) && divTop.has(e.target).length === 0) {
                this.toolVerShow = false;
            }
        });
    }

btnShow(){
  this.toolVerShow = true;
  window.event.stopPropagation(); //阻止冒泡
}