checkbox - 将标签添加到复选框/开关 Angular 2

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

截图如下:

我希望那些 Employees 和 Client 位于开关/复选框旁边。

Answer 1

将每个 Label 和 Switch 标签放在额外的 StackLayout 中

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