Question

我正在使用Typescript准备Angular 2中的日历。只有在单击后才会显示日历，但我希望日历在页面加载时显示而不需要单击。由于我是打字稿的新手，我无法做到。

HTML

<ng-datepicker [ngModel]="startDatePicker"></ng-datepicker>

打字稿

startDatePicker: Date = moment().subtract(1, 'day').toDate();

What I need on page load

What Currently I am getting on page load

Answer 1

HTML

<ng-datepicker #reference [ngModel]="startDatePicker"></ng-datepicker>

打字稿

import { ViewChild } from '@angular/core';
/*some Code*/
ngOnInit() {
@ViewChild('reference')
private datepicker: ElementRef;

this.datepicker.nativeElement.click();
}

Answer 2

您可以通过为模板提供ID来获取模板中的组件，并在其上调用toggle方法。

通用示例如下所示。

父组件。

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <toggle-comp #toggleComp></toggle-comp>
    </div>
  `,
})
export class App implements AfterViewInit  {
  name:string;

  @ViewChild('toggleComp') public testComp: TestComp;

  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }

  ngAfterViewInit() {
    setInterval(() => {
      this.testComp.toggleState();

    }, 1000);
  }
}

子组件（在您的情况下是日期选择器）。

@Component({
  selector: 'toggle-comp',
  template `<div>{{toggle}}</div>`
})
export class TestComp {
 public toggle= false;

  constructor() {}

  public toggleState() {
    this.toggle = !this.toggle;
  }
}

在您的情况下，您将#id放在ng-datepicker上。

<ng-datepicker #datePicker [ngModel]="startDatePicker"></ng-datepicker>

并在@ViewChild('datePicker')的组件中解决它。

您可以看到一个有效的例子here。

Answer 3

材料角日期选择器打开Onclick或Focus

在元素中添加事件绑定属性

<mat-form-field color="accent">
   <mat-label>Select Date</mat-label>
   <input matInput [matDatepicker]="picker1" (focus)="picker2.open()" [(ngModel)]="selectedDate">
   <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
   <mat-datepicker #picker1 color="secondary"></mat-datepicker>
</mat-form-field>

在ng-datepicker中触发自动点击事件

3 个答案:

材料角日期选择器打开Onclick或Focus