Получить часы и минуты в виджете TimePicker в Nativescript + Angular при нажатии на кнопку

Question

Документация Nativescript Timepicker говорит, что я могу использовать оба loaded а также timeChange события для того, чтобы взаимодействовать с датами.

Однако мне нужно узнать время, когда пользователь нажимает кнопку отправки. Можете ли вы дать мне несколько советов для достижения этого? Я использую @ViewChild для получения элемента по ссылке, хотя, кажется, это не правильный способ сделать это.

Answer 1

Вы можете использовать @ViewChild, чтобы получить ссылку на ваш TimePicker и прочитать текущие значения времени. Тем не менее, если вы предпочитаете, вы также можете напрямую использовать нативный loaded Событие для достижения того же.

Пример с использованием ссылки из loaded событие

Время-picker.component.html

<StackLayout class="home-panel">
    <TimePicker #tp (loaded)="onTimePickerLoaded($event)" 
                [hour]="currentHour" [minute]="currentMinute" 
                verticalAlignment="center"></TimePicker>
    <Button text="Submit" (tap)="onSubmit()"></Button>
</StackLayout>

временный picker.component.ts

import { Component } from "@angular/core";
import { TimePicker } from "tns-core-modules/ui/time-picker";

@Component({
    selector: "time-picker",
    moduleId: module.id,
    templateUrl: "./time-picker.component.html"
})
export class HomeComponent {
    currentHour: number = new Date().getHours();
    currentMinute: number = new Date().getMinutes();
    timePicker: TimePicker;

    onTimePickerLoaded(args) {
        this.timePicker = args.object as TimePicker;
    }

    onSubmit(): void {
        console.log("Submit was pressed");

        console.log(this.timePicker.time);
        console.log(this.timePicker.hour);
        console.log(this.timePicker.minute);
    }
}

Демонстрация игровой площадки по вышеуказанному сценарию.

Другая возможность - получить ссылку через getViewById и с помощью Page DI.

Пример использования внедрения зависимости страницы.

Время-picker.component.html

<StackLayout class="home-panel">
    <TimePicker #tp id="my-time-picker" (loaded)="onTimePickerLoaded($event)" 
                [hour]="currentHour" [minute]="currentMinute" 
                verticalAlignment="center"></TimePicker>
    <Button text="Submit" (tap)="onSubmit()"></Button>
</StackLayout>

временный picker.component.ts

import { Component } from "@angular/core";
import { TimePicker } from "tns-core-modules/ui/time-picker";
import { Page } from "tns-core-modules/ui/page";

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./time-picker.component.html",
})
export class HomeComponent {
    currentHour: number = new Date().getHours();
    currentMinute: number = new Date().getMinutes();

    timePicker: TimePicker;

    constructor(private _page: Page) { 
        this._page.on("loaded", () => { 
            this.timePicker = this._page.getViewById("my-time-picker");
        })
    }

    onSubmit(): void {
        console.log("Submit was pressed");

        console.log(this.timePicker.time);
        console.log(this.timePicker.hour);
        console.log(this.timePicker.minute);
    }
}

Демонстрация игровой площадки для приведенного выше примера