将标签添加到复选框/切换 Angular 2答案

【问题标题】：Add a label to checkbox/switch Angular 2将标签添加到复选框/切换 Angular 2
【发布时间】：2016-11-22 01:30:52
【问题描述】：

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

截图如下：

我希望那些员工和客户位于开关/复选框旁边。

【问题讨论】：

标签： checkbox typescript angular nativescript

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

你可以试试nativescript-checkbox

1) 使用“tns plugin add nativescript-checkbox”安装

2) 注册组件

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

选中 angular2 nativescript 复选框repo

【讨论】：