Question

我试图添加复选框，但我读到只能使用...并在单击时更改图像。但是，它无法正常工作（onTap（）函数）。既然没有工作。我的第二个选择是使用开关。

如何在复选框/开关中添加标签？由于这条线不起作用：

<label><switch [checked]="checked" (tap)="onTap()" align="right"> </switch>Employees </label>

我的sync.component.ts文件：

import {Component, EventEmitter} from '@angular/core';
import {NS_ROUTER_DIRECTIVES} from 'nativescript-angular/router';
import {APP_ROUTER_PROVIDERS} from "../app.routes"
import ImageModule = require("ui/image");
var ImageSourceModule = require("image-source");

var image1 = new ImageModule.Image();
var image2 = new ImageModule.Image();

image1.imageSource = ImageSourceModule.fromResource("checkbox_checked");
image2.imageSource = ImageSourceModule.fromResource("checkbox_unchecked");
image1.src = "~/checkbox_checked.png";
image2.src = "~/checkbox_unchecked.png";

@Component({
selector: "checkbox",
inputs: ["checked : checked"],
outputs: ["tap"],
template: `

<StackLayout backgroundColor="#b3d9ff" width="300" height="550">

  <Label style="font-size : 20px" text="Choose contacts to sync" horizontalAlignment="center"></Label>
  <switch [checked]="checked" (tap)="onTap()" align="right"> </switch>
  <Label text= "Employees" horizontalAlignment="center"></Label>
  <switch [checked]="checked" (tap)="onTap()" align="right"> </switch>
  <Label text= "Clients" horizontalAlignment="center"></Label>


    <Image
      [src]="checked ? '~/checkbox_checked' : '~/checkbox_unchecked'"
      class="checkbox"
      (tap)="onTap()"
      dock="left"
      width="20" height="20"
      align = "right"></Image>

</StackLayout> `
})

 export class SyncComponent{
 public tap:     EventEmitter<boolean> = new EventEmitter<boolean>();
 public checked: boolean = false;

 //constructor() { }

 public onTap(): void {
     this.tap.next(this.checked);
 }
 }

以下是截图：

我希望那些员工和客户端位于交换机/复选框旁边。

Answer 1

将每个Label和Switch标记放在附加的StackLayout

中

<StackLayout orientation="horizontal">
   <Label ... />
   <Switch ... />
</StackLayout>

Answer 2

您可以查看此页面，它会告诉您该怎么做。

http://docs.nativescript.org/cookbook/ui/switch

所有你需要做的就是告诉它去横向，像这样：

public void timeIdentifier()
    {
        seiyu.SelectVoiceByHints(VoiceGender.Female);
        while(true)
        {
            string alarm = String.Format("Time check");
            seiyu.Speak(alarm);
            string sayTime = String.Format(DateTime.Now.ToString("h:mm tt"));
            seiyu.Speak(sayTime);
            // It will sleep for 5 minutes LOL
            Thread.Sleep(300000);
        }
    }

Answer 3

您可以尝试nativescript-checkbox

1）使用＆＃34; tns插件安装添加nativescript-checkbox＆＃34;

2）注册组件

import { registerElement } from "nativescript-angular/element-registry";
registerElement("CheckBox", () => require("nativescript-checkbox").CheckBox);

检查angular2 nativescript复选框repo

添加标签以复选框/切换Angular 2

3 个答案: