单击按钮时，在Nativescript + Angular中获取TimePicker小部件中的小时和分钟

Question

Nativescript Timepicker documentation说我可以使用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);
    }
}

Playground demo for the above scenario.

另一种可能性是通过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);
    }
}

Playground demo for the above example