Javascript 日期选择器Angular2隐藏弹出窗口

我对在angular2中一页使用多个datepicer有异议 这是示例代码

问题是，我想在单击另一个日期选择器时隐藏日期选择器弹出窗口

---

有人能帮我解决问题吗？

我稍微修改了

openDatePicker

方法：

  openDatepicker(id){
    if (this.dynamicId && this.dynamicId !== id) {
      this.dynamicId.close();
    }
    this.dynamicId = id;
  }

关于

onClick

，当单击页面上的某个位置（不包括当前输入和日期选择器按钮）时，应隐藏日期选择器。我使用了以下条件：

if (!this._eref.nativeElement.contains(event.target) || !this.dynamicId._elRef.nativeElement.parentNode.contains(event.target)) {
      setTimeout(() => this.dynamicId.close(), 10);
    }

它依赖于输入和按钮具有公共父级，否则它将无法工作

---

plnkr:

明白了，非常感谢。我又有一个问题，当我点击另一个输入栏时，如何隐藏日期选择器？请帮助我使用onClick函数关于这个。。。一般来说，我会创建一个封装一个日期选择器的组件，这样您的代码就可以了。然而，我在示例中使用了更复杂、更不可靠的东西…如果我为wrap datepicker创建组件，这意味着如果我在一个页面中有4个datepicker表单，我需要创建4个组件？这在角度上正常吗？我只是在几天内学习angular不，我指的是扩展库提供的datepicker功能的一个组件。正如您所见，日期选择器具有相同的html结构，因此不必重复。实际上，它们之间有两个不同之处——name和ngModel——都可以作为组件参数传递。datepicker的示例包装可以如下所示：

。我认为这是另一个问题；）