NativeScript / Angular Page.getViewById возвращает значение undefined

Question

Я работаю над приложением NativeScript/Angular. Я новичок в NativeScript и следую учебному пособию, основанному на более ранней версии (у меня 4.1.0, я не уверен, что они используют). Там есть модальный диалог с элементом DatePicker. Я хотел бы вернуть выбранную дату в родительский элемент. Приложение компилируется и запускается просто отлично. Но когда я пытаюсь открыть модальное окно, я получаю сообщение об ошибке "Невозможно установить свойство 'year' of undefined".

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>

А вот и класс:

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());
  }
}

Answer 2

Это сработало для меня:

NativeScript angular nativeView undefined

В ngOnInit(): void {вернулся undefined. Но при использовании onLoad @ViewChildработал нормально.

что-то вроде

<StackLayout orientation="vertical" id="formie" (loaded)="onLoaded($event)">

и на компоненте:

export class FormComponent implements OnInit, AfterViewInit {
  @ViewChild('datepicker') datepicker: ElementRef;
  datePickerReal: DatePicker;
  onLoaded(event: EventData) {
    this.datePickerReal = <Label>this.datepicker.nativeElement;