angular - Angular 4 - Datarangepicker 在不同的组件中应用配置

Question

我正在使用 datarangepicker 来处理日期。

我有两个组件，每个组件都有不同的日期设置范围，但我不能让它们对每个组件都不同，它们都采用组件“main1.component.ts”的配置。

这是代码ts：

main1.component.ts

    import { Daterangepicker, DaterangepickerConfig } from 'ng2-daterangepicker';
    constructor(private daterangepickerOptions: DaterangepickerConfig) {
      this.daterangepickerOptions.settings = {
        locale: { format: 'DD/MM/YYYY HH:mm' },
        alwaysShowCalendars: true,
        timePicker: true,
        timePicker24Hour: true,
        timePickerSeconds: false,
        timePickerIncrement: 1,
        ranges: {
            'Yesterday': [moment().subtract(1, 'day'), moment()],
            'Last week': [moment().subtract(7, 'day'), moment()],
            'Last month': [moment().subtract(1, 'month'), moment()],
            'Last 2 months': [moment().subtract(2, 'month'), moment()]
        }
      };
    }

main2.component.ts

import { Daterangepicker, DaterangepickerConfig } from 'ng2-daterangepicker';
    constructor(private daterangepickerOptions: DaterangepickerConfig) {
      this.daterangepickerOptions.settings = {
        locale: { format: 'DD/MM/YYYY' },
        alwaysShowCalendars: true,
        timePicker: false,
        timePicker24Hour: true,
        timePickerSeconds: false,
        timePickerIncrement: 5,
        ranges: {
          'Yesterday': [moment().subtract(1, 'day'), moment()],
          'Last week': [moment().subtract(7, 'day'), moment()],
          'Last month': [moment().subtract(1, 'month'), moment()],
          'Last 3 months': [moment().subtract(3, 'month'), moment()],
          'Last 6 months': [moment().subtract(6, 'month'), moment()]
        }
      };
    }

问题是组件1的模板有组件2，如果两个组件的日历配置不同，组件2采用组件1的配置，我希望配置不同。

这是模板 main1.component.html

<span>Calendar 1</span>
<div *ngFor="let dateInput of dateInputs">
    <div daterangepicker
    [options]="{startDate:dateInput.start, endDate:dateInput.end }"
    (selected)="selectedDate($event, dateInput)">
    <label>Date:</label>
    <div>
      <label>From:</label>
      <input class="form-control" type="text" name="dateStart" value="{{ dateInput.start | date:'dd/MM/yyyy HH:mm' }}" readonly formControlName="dateStart" />
      <label>To:</label>
      <input class="form-control" type="text" name="dateEnd" value="{{ dateInput.end | date:'dd/MM/yyyy HH:mm' }}" readonly formControlName="dateEnd" />
    </div>
</div>
<main2.component></main2.component>

这是模板 main2.component.html

<span>Calendar 2</span>
<div *ngFor="let dateInput of dateInputs">
    <div daterangepicker
    [options]="{startDate:dateInput.start, endDate:dateInput.end }"
    (selected)="selectedDate($event, dateInput)">
    <label>Date:</label>
    <div>
      <label>From:</label>
      <input class="form-control" type="text" name="dateStart" value="{{ dateInput.start | date:'dd/MM/yyyy HH:mm' }}" readonly formControlName="dateStart" />
      <label>To:</label>
      <input class="form-control" type="text" name="dateEnd" value="{{ dateInput.end | date:'dd/MM/yyyy HH:mm' }}" readonly formControlName="dateEnd" />
    </div>
</div>

可能是什么问题呢？谢谢，