如何在 angular 中动态删除 MAT_DATE_RANGE_SELECTION_STRATEGY
How to remove MAT_DATE_RANGE_SELECTION_STRATEGY dynamically in angular
我正在尝试使用自定义 MAT_DATE_RANGE_SELECTION_STRATEGY 在 angular 中实现日期选择器。这允许用户 select 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
}]
})
然而,当用户select选中允许自定义日期范围复选框(如上图所示)时,我希望禁用自定义策略并允许用户选择任何日期范围。
我怎样才能实现这个功能?我假设,我们需要从组件中动态删除 below 以允许任何日期 selection。但是我不知道该怎么做。
providers: [{
provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
useClass: FourteenDayRangeSelectionStrategy
}]
请帮忙。
您在 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)]
的复选框完成代码
我正在尝试使用自定义 MAT_DATE_RANGE_SELECTION_STRATEGY 在 angular 中实现日期选择器。这允许用户 select 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
}]
})
然而,当用户select选中允许自定义日期范围复选框(如上图所示)时,我希望禁用自定义策略并允许用户选择任何日期范围。
我怎样才能实现这个功能?我假设,我们需要从组件中动态删除 below 以允许任何日期 selection。但是我不知道该怎么做。
providers: [{
provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
useClass: FourteenDayRangeSelectionStrategy
}]
请帮忙。
您在 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)]
的复选框完成代码