如何以角度动态删除 MAT_DATE_RANGE_SELECTION_STRATEGY

Posted 2023-05-07

【中文标题】如何以角度动态删除 MAT_DATE_RANGE_SELECTION_STRATEGY

【英文标题】：How to remove MAT_DATE_RANGE_SELECTION_STRATEGY dynamically in angular

【发布时间】：2021-12-15 13:07:00

【问题描述】：

我正在尝试使用自定义 MAT_DATE_RANGE_SELECTION_STRATEGY 以角度实现日期选择器。允许用户选择 14 天的范围。

使用以下代码（直接取自 Angular 文档）来实现自定义策略

@Injectable()
export class FourteenDayRangeSelectionStrategy<D> implements MatDateRangeSelectionStrategy<D> 
  constructor(private _dateAdapter: DateAdapter<D>) 

  selectionFinished(date: D | null): DateRange<D> 
    return this._createFourteeDayRange(date);
  

  createPreview(activeDate: D | null): DateRange<D> 
    return this._createFourteeDayRange(activeDate);
  

  private _createFourteeDayRange(date: D | null): DateRange<D> 
    if (date) 
      const start = this._dateAdapter.addCalendarDays(date, 0);
      const end = this._dateAdapter.addCalendarDays(date, 13);
      return new DateRange<D>(start, end);
    

    return new DateRange<D>(null, null);
  

并将其注入到组件中，如下所示。

@Component(
  selector: 'app-awesomecomponent',
  templateUrl: './awesomecomponent.component.html',
  styleUrls: ['./awesomecomponent.component.css'],
  providers: [
    provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
    useClass: FourteenDayRangeSelectionStrategy
  ]
)

但是，当用户选择允许自定义日期范围复选框（如上图所示）时，我希望禁用自定义策略并允许用户选择任何日期范围。

我怎样才能实现这个功能？我假设，我们需要从组件中动态删除以下内容以允许选择任何日期。但是我不知道该怎么做。

providers: [
    provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
    useClass: FourteenDayRangeSelectionStrategy
  ]

请帮忙。

【参考方案1】：

您在github 中有 MatDateRangeSelectionStrategy 的来源，因此您可以使用变量来激活或不激活策略。

export class FourteenDaySelectionStrategy<D>
  implements MatDateRangeSelectionStrategy<D>

  constructor(private _dateAdapter: DateAdapter<D>) 
  off: boolean = false; //--use a variable "off"
  selectionFinished(date: D | null, currentRange: DateRange<D>): DateRange<D> 
    if (!this.off) return this._createFourteenDayRange(date);

    //see that al the code below is the code of the github
    let  start, end  = currentRange;

    if (start == null) 
      start = date;
     else if (
      end == null &&
      date &&
      this._dateAdapter.compareDate(date, start) >= 0
    ) 
      end = date;
     else 
      start = date;
      end = null;
    

    return new DateRange<D>(start, end);
  

  createPreview(
    activeDate: D | null,
    currentRange: DateRange<D>
  ): DateRange<D> 
    if (!this.off) return this._createFourteenDayRange(activeDate);

    //see that al the code below is the code of the github
    let start: D | null = null;
    let end: D | null = null;

    if (currentRange.start && !currentRange.end && activeDate) 
      start = currentRange.start;
      end = activeDate;
    

    return new DateRange<D>(start, end);
  

  private _createFourteenDayRange(date: D | null): DateRange<D> 
    if (date) 
      const start = date;
      const end = this._dateAdapter.addCalendarDays(date, 14);
      return new DateRange<D>(start, end);
    

    return new DateRange<D>(null, null);
  

现在，您需要注入 MatDateRangeSelection 并使用 getter 来更改变量 off 的值

  constructor(
    @Inject(MAT_DATE_RANGE_SELECTION_STRATEGY)
    private rg: FourteenDaySelectionStrategy<any>
  ) 
  get customRange() 
    return this.rg.off;
  
  set customRange(value) 
    this.rg.off = value;
  

带有[(ngModel)] 的复选框完成代码

见stackblitz

【讨论】：

这是正确的，感谢代码。