angular - NativeScript/Angular Page.getViewById 返回 'undefined'

Question

我正在开发 NativeScript/Angular 应用程序。我是 NativeScript 的新手，正在学习基于早期版本的教程(我的是 4.1.0，不确定他们使用的是什么)。有一个带有 DatePicker 元素的模式对话框。我希望它将选定的日期返回给父元素。该应用程序可以正常编译和启动。但是当我尝试打开模态时，出现错误“无法设置未定义的属性‘年份’”。

HTML如下:

<StackLayout class="modal-view-style">
  <StackLayout>
    <DatePicker id="datePicker"></DatePicker>
  </StackLayout>
  <Button class="btn btn-primary btn-active" text="submit" (tap)="submit()"></Button>
</StackLayout>

这是类(class):

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { ModalDialogParams } from 'nativescript-angular/modal-dialog';
import { DatePicker } from 'tns-core-modules/ui/date-picker';
import { Page } from 'tns-core-modules/ui/page';

@Component({
  moduleId: module.id,
  templateUrl: './date-picker-modal.component.html'
})
export class DatePickerModalComponent implements OnInit {

  constructor(private params: ModalDialogParams, private page: Page) { }

  ngOnInit() { 
    let datePicker: DatePicker = <DatePicker>this.page.getViewById<DatePicker>('datePicker');

      let currentdate: Date = new Date();
      datePicker.year = currentdate.getFullYear();
      datePicker.month = currentdate.getMonth() + 1;
      datePicker.day = currentdate.getDate();
      datePicker.minDate = currentdate;
      datePicker.maxDate = new Date(2045, 4, 12);
  }

  public submit() {
      let datePicker: DatePicker = <DatePicker>this.page.getViewById<DatePicker>('datePicker');
      let selectedDate = datePicker.date;

      let reserveTime = new Date(
        selectedDate.getFullYear(),
        selectedDate.getMonth(),
        selectedDate.getDate()
      ));
      this.params.closeCallback(reserveTime.toISOString());
  }

}

有人知道这是怎么回事吗？我假设只是 api 发生了变化，但我无法在文档中找到它。如果我对此是正确的，将非常感谢指向文档中适当位置的链接。另外，如果这不是做这类事情的“首选”方式，我很想知道是什么。谢谢。

Answer 1

如果你将 NativeScript 与 Angular 一起使用，那么使用 Angular 模板变量语法如下:

<StackLayout class="modal-view-style">
  <StackLayout>
    <!-- notice the # -->
    <DatePicker #datePicker></DatePicker>
  </StackLayout>
  <Button class="btn btn-primary btn-active" text="submit" (tap)="submit()"></Button>
</StackLayout>

你的组件应该是这样的:

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { ModalDialogParams } from 'nativescript-angular/modal-dialog';
import { DatePicker } from 'tns-core-modules/ui/date-picker';
import { Page } from 'tns-core-modules/ui/page';

@Component({
  moduleId: module.id,
  templateUrl: './date-picker-modal.component.html'
})
export class DatePickerModalComponent implements OnInit {
  @ViewChild('datePicker') dp: ElementRef;

  datePicker: DatePicker;
  constructor(private params: ModalDialogParams, private page: Page) { }

  ngOnInit() { 
      this.datePicker = <DatePicker>this.dp.nativeElement;

      let currentdate: Date = new Date();
      this.datePicker.year = currentdate.getFullYear();
      this.datePicker.month = currentdate.getMonth() + 1;
      this.datePicker.day = currentdate.getDate();
      this.datePicker.minDate = currentdate;
      this.datePicker.maxDate = new Date(2045, 4, 12);
  }

  public submit() {
      let selectedDate = this.datePicker.date;

      let reserveTime = new Date(
        selectedDate.getFullYear(),
        selectedDate.getMonth(),
        selectedDate.getDate()
      ));
      this.params.closeCallback(reserveTime.toISOString());
  }
}