angular - 如何在 Angular4/TypeScript 中以编程方式打开 ng-datetime-picker 的选择对话框？

我想以编程方式打开 ng 日期时间（owl-date-time）选择器对话框？

date-time-picker - “以对话框方式打开选择器” 部分。

HTML

<mat-select  [(ngModel)]="createAnnounceReq.sendStatus" formControlName="sendStatus" (change)="onChange_Status($event.value)">
    <mat-option *ngFor="let item of sendStatusList; let i = index;" [value]="item.value">
        {{ item.label }}

        //dropdown is like
        - Today (Now)
        - 1week a head
        - 3 months a head
        - pick specific date

    </mat-option>
</mat-select>

<input [owlDateTimeTrigger]="dt5" [owlDateTime]="dt5" readonly>
<owl-date-time [pickerMode]="'dialog'" #dt5></owl-date-time>    

类型脚本

.....

@Component({
  selector: 'app-announce-send',
  templateUrl: './announce-send.component.html',
  styleUrls: ['./announce-send.component.css'], 
  providers : [AnnourceService]
})
export class AnnounceSendComponent implements OnInit {  
    .....

    onChange_Status(value) {
        if(value == something) {
            // here how to open picker dialog programmatically
        }
    }

    .....   
}

答案＃1

要以编程方式模拟 click 事件，您可以为您的 input 元素添加标识符，然后在组件内部访问它，类似这样：

HTML

<input #target [owlDateTimeTrigger]="dt5" [owlDateTime]="dt5" readonly>

组件

@ViewChild('target') target: ElementRef;

ngAfterViewInit() {
  /* Simulate click event every 5 seconds */
  setInterval(() => this.target.nativeElement.click(), 5000);
}

这里是一个通过编程方式聚焦 input 的实时示例（如果需要，你也可以将 focus() 替换为 click() 事件）：https://stackblitz.com/edit/angular-1xz9zv?file=src%2Fapp%2Fapp.component.ts