Ng Date Time Picker select 时无法滚动背景页面

Question

我在 angular 表单中使用了以下 Ng Date 时间选择器。

https://danielykpan.github.io/date-time-picker/

选择日期时间选择器后，我无法滚动背景页面，因为它默认处于禁用状态。我需要做的是在选择日期选择器时启用页面滚动。在进一步调查中，我发现 scrollStrategy 默认设置为“blockStratergy”。我在日历中添加了一个点击事件并将状态更改为“noopStrategy”。

这是我的 HTML 标签。

 <fieldset class="form-group">
                        <label>Occured After</label>
                        <div class="input-group">
                            <input formControlName="occuredAfter" [owlDateTimeTrigger]="datePicker2"
                                   [owlDateTime]="datePicker2"
                                   class="form-control" placeholder="mm/dd/yyyy HH:MM" id="occuredAfter">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary calendar fa fa-calendar" (click)="enablepage()"
                                        [owlDateTimeTrigger]="datePicker2" type="button" ></button>
                            </div>
                            <owl-date-time #datePicker2 [showSecondsTimer]="false"></owl-date-time>
                        </div>
                    </fieldset>

这是我在 .ts 中更改策略的方法 class,

public enablepage(): () => void {
             this.overlay.scrollStrategies.noop();
    }

但是它给我一个错误。

TypeError: this.overlay is undefined

任何人都可以找到我将 blockStrategy 更改为“closeStratergy”或“noopStratergy”的方法吗？

Answer 1

你必须这样使用。

import {
  ScrollStrategy,
  ScrollStrategyOptions
} from "@angular/cdk/overlay";

export class test implements OnInit {
  scrollStrategy: ScrollStrategy;
  
  constructor(private readonly sso: ScrollStrategyOptions) {
    this.scrollStrategy = this.sso.noop();//.reposition();
  }
}

这样使用

<owl-date-time [scrollStrategy]="scrollStrategy"  #yourdate></owl-date-time>

Ng Date Time Picker select 时无法滚动背景页面

unable to scroll background page when Ng Date Time Picker select

html

angular

typescript

uidatepicker

bootstrap-datepicker