Question

我正在使用ng-pick-datetime选择器作为对话模式。它工作正常，但是如果我打开它并移动到其他路径而不关闭它，我的应用程序将挂起。因此，请建议我在移至另一条路径之前如何关闭选择器。我试图使用ViewChild获得可访问性，但是它不起作用。

<button type="button" class="list-group-item list-group-item-action" [ngClass]="{'active': selectedItem == devices.name}" [owlDateTimeTrigger]="dt5">
                        <!-- [ngClass]="status ? 'active' : 'light'" -->
                        {{devices.name}}
                        <!-- To show datetime picker -->
                        <input [owlDateTime]="dt5" [(ngModel)]="selectedDateTime" class="hideInput" [min]="minDate" [max]="maxDate"
                        (dateTimeInput)="getHistory(devices.imei_no,devices.remaining_days_to_expire,devices.name)">
                        <owl-date-time [pickerMode]="'dialog'" #dt5></owl-date-time>                         
                    </button>

@ViewChild('dt5') calendarView: ElementRef;

ngOnDestroy(): void {
  this.calendarView.nativeElement.visibility = 'hidden' //throwing error cannot set property of undefined element
}

Answer 1

如果您在选择器上使用* ngIf =“”属性，则当您导航到另一条路线时，该变量将被销毁，这意味着您的选择器将不再显示（也许有另一种更有效的方法，但这是解决方案我生产的），请尝试以下方法：

在模板方面

<ng-template [ngIf]="showPicker"><button type="button" class="list-group-item list-group-item-action" [ngClass]="{'active': selectedItem == devices.name}" [owlDateTimeTrigger]="dt5">
                        <!-- [ngClass]="status ? 'active' : 'light'" -->
                        {{devices.name}}
                        <!-- To show datetime picker -->
                        <input [owlDateTime]="dt5" [(ngModel)]="selectedDateTime" class="hideInput" [min]="minDate" [max]="maxDate"
                        (dateTimeInput)="getHistory(devices.imei_no,devices.remaining_days_to_expire,devices.name)">
                        <owl-date-time [pickerMode]="'dialog'" #dt5></owl-date-time>                         
                    </button></ng-template>

在组件方面

showPicker: boolean = true;
ngOnDestroy(): void {
 this.showPicker = false;
}

如果这不起作用，请尝试将ngIf放入： <owl-date-time>标签。

如何在角度6中手动关闭ng-pick-datetime选择器？

1 个答案: