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;

    });

   }

}

 

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

发布了4 篇原创文章 · 获赞 0 · 访问量 67
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览