Checkbox 将标签添加到复选框/开关2

我试图添加复选框，但我读到它只能使用。。。并在单击时更改图像。但是，它不起作用（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);
 }
 }

从'@angular/core'导入{Component，EventEmitter}；
从“nativescript/ROUTER”导入{NS_ROUTER_指令}；
从“./APP.routes”导入{APP\u路由器\u提供者}
导入ImageModule=require（“用户界面/图像”）；
var ImageSourceModule=require（“图像源”）；
var image1=新的ImageModule.Image（）；
var image2=新的ImageModule.Image（）；
image1.imageSource=ImageSourceModule.fromResource（“选中复选框”）；
image2.imageSource=ImageSourceModule.fromResource（“未选中复选框”）；
image1.src=“~/checkbox\u checked.png”；
image2.src=“~/checkbox\u unchecked.png”；
@组成部分({
选择器：“复选框”，
输入：[“选中：选中”]，
输出：[“抽头”]，
模板：`
`
})
导出类同步组件{
公共点击：EventEmitter=neweventemitter（）；
公共选中：布尔值=false；
//构造函数（）{}
public onTap（）：void{
this.tap.next（this.checked）；
}
}

以下是截图：

---

我希望这些员工和客户在交换机/复选框旁边。

将每个标签和交换机标签放在额外的StackLayout中

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

---

你可以看看这个页面，它告诉你该怎么做

你需要做的就是告诉它转到水平方向，如下所示：

<StackLayout orientation="horizontal">
   <Switch checked="true"></Switch>
   <Button isEnabled="true" text="This is a Button!"></Button>
 </StackLayout>

您可以试试

1） 使用“tns插件添加nativescript复选框”安装

2）注册组件

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

选中angular2 nativescript复选框