Angular 4中的数据绑定与第三方组件

时间:2018-03-01 12:52:05

标签: angular

我正在使用第三方,但我相信它不是问题,而是我的代码。

我使用了以下日期选择器:

https://github.com/kekeh/mydatepicker

然后将其打包成指令:

import { IMyDpOptions, IMyMonthLabels, IMyDate, IMyDateRange } from 'mydatepicker';
import { Component, OnInit, Input, EventEmitter, Output, } from '@angular/core';

@Component({
  selector: 'app-datepicker',
  template:
  `<my-date-picker name="mydate"  [(ngModel)]="model" [options]="myDatePickerOptions" (dateChanged)="onDateChanged($event)" ></my-date-picker>`
})
export class DatePicker implements OnInit {

  public model: any;


  @Input('Date') DateString: string;
  @Output('DateChange') DateChange: EventEmitter<string> = new EventEmitter<string>();

  constructor() { }

  ngOnInit() {
        this.model = { date: { year: 1999, month: 12, day: 12 } };
  }


  public myDatePickerOptions: IMyDpOptions = {
    // other options...
    dateFormat: 'dd.mm.yyyy',

  };

  onDateChanged(event: any) {
    let date = event.date.year + "-" + event.date.month + "-" + event.date.day;
    this.DateChange.emit(date);

  }

}

https://angular-y5ephz.stackblitz.io

https://stackblitz.com/edit/angular-y5ephz?file=app%2Fapp.component.html

问题是第二个datepicker不会改变它的值,尽管它的值在getDay方法中被改变了。

问题是,如何强制第二改变其价值......

1 个答案:

答案 0 :(得分:0)

您的组件正确地将值发送到函数getDay($event)。 但在该功能中,您设置两个日期: this.date1 = this.date2 = event;

试试这个:stackblitz