angular6实现点击空白隐藏下拉框

1.在项目的常驻组件中，如header.component.js。目的是在任何页面的任何位置触发事件，进行事件传递。

import { ListServiceService } from './list-service.service';

constructor(

    private listService:ListServiceService,

    ) {

      document.onclick = (() => {

        this.listService.goShowModel("data");

      })

    }

2.在list-service.service中

import { Subject } from 'rxjs';

export class ListServiceService {

    //点击文档事件，关闭弹框某些弹框

    private showModel = new Subject();

    //获得一个Observable

    hideModel =this.showModel.asObservable();

    //发射数据，当调用这个方法的时候，Subject就会发射这个数据，所有订阅了这个Subject的Subscription都会接受到结果

    goShowModel(data) {

        this.showModel.next(data);

    }

}

3.在弹框组件中，通过isShow控制下拉框是否显示

import { Subscription } from 'rxjs';

export class FilterMoreComponent implements OnInit {

  subscription: Subscription;//监听事件流

  isShow:boolean = false;//表示当前的弹框组件是否显示

  constructor(

    private listService:ListServiceService,

  ) {

    this.subscription = this.listService.hideModel.subscribe((res:any) => {

      this.isShow = false;

    });

   }

}

 

/**以上内容为个人笔记，若有疑问，欢迎大家留言。*/