On/Off CSS 中的 FlipSwitch 不能用作 Angular 2 组件

Question

我正在尝试创建一个可重复使用的翻转开关组件

import { Component, Input } from "@angular/core";

@Component({
    selector: "bm-input-switch",
    templateUrl: "./bm-input-switch.component.html",
    styleUrls:['bm-input-switch.component.css']
})
export class BmInputSwitchComponent {

    @Input()
    name: string;

    @Input()
    id: string;

    @Input()
    labelText: string;

    @Input()
    checked :boolean;
}

HTML bm-输入-switch.component.html:

<div>
    <div class="onoffswitch">
        <input type="checkbox" [name]="name" class="onoffswitch-checkbox" [id]="id">
        <label class="onoffswitch-label" [for]="id">
            <span class="onoffswitch-inner"></span>
            <span class="onoffswitch-switch"></span>
        </label>
    </div>
</div>

CSS bm-输入-switch.component.css

.onoffswitch {
    position: relative;
    width: 90px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.onoffswitch-checkbox {
    display: none;
}

.onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #999999;
    -ms-border-radius: 20px;
    border-radius: 20px;
}

.onoffswitch-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    -ms-transition: margin 0.3s ease-in 0;
    -o-transition: margin 0.3s ease-in 0;
    -webkit-transition: margin 0.3s ease-in 0;
    transition: margin 0.3s ease-in 0;
}

    .onoffswitch-inner:before, .onoffswitch-inner:after {
        display: block;
        float: left;
        width: 50%;
        height: 30px;
        padding: 0;
        line-height: 30px;
        font-size: 14px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .onoffswitch-inner:before {
        content: "YES";
        padding-left: 10px;
        background-color: #1C456B;
        color: #FFFFFF;
    }

    .onoffswitch-inner:after {
        content: "NO";
        padding-right: 10px;
        background-color: #EEEEEE;
        color: #999999;
        text-align: right;
    }

.onoffswitch-switch {
    display: block;
    width: 27px;
    margin: 1.5px;
    background: #FFFFFF;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 56px;
    border: 2px solid #999999;
    -ms-border-radius: 20px;
    border-radius: 20px;
    -ms-transition: all 0.3s ease-in 0;
    -o-transition: all 0.3s ease-in 0;
    -webkit-transition: all 0.3s ease-in 0;
    transition: all 0.3s ease-in 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px;
}

用法

<bm-input-switch id="gaVersion" name="gaVersion" labelText="GA Version" checked="false"></bm-input-switch>

但是，它不会更改点击时的状态。如果我不将它用作组件而只是尝试在静态页面中运行，它就会工作。

有什么想法吗？笨蛋：https://plnkr.co/edit/hdNI02Eywx1xsHTn9tSA?p=preview

Answer 1

您在开关组件上的输入变量混淆了 "for" 属性。如果您查看生成的 html，您将拥有两个具有相同 ID 的元素。另外，不要对原生 DOM 属性使用方括号，只需使用大括号即可。

检查这个新的 plnkr 和一个工作开关。 https://plnkr.co/edit/isecXgfkU3K93GIxtviP?p=preview

我刚刚将您的 "id" 和 "name" 变量更改为 "switchId" 和 "switchName"，并且还更改了 [id] 和 [name] 绑定以使用开关组件内的大括号 html.

您的新开关组件：

import { Component, Input } from "@angular/core";

@Component({
    selector: "bm-input-switch",
    templateUrl: "bm-input-switch.component.html",
    styleUrls:['bm-input-switch.component.css']
})
export class BmInputSwitchComponent {

    @Input()
    switchName: string;

    @Input()
    switchId: string;

    @Input()
    labelText: string;

    @Input()
    checked :boolean;
}

你的开关组件html:

<div>
  <div>{{labelText}}</div>
  <div class="onoffswitch">
    <input type="checkbox" name="{{switchName}}" class="onoffswitch-checkbox" id="{{switchId}}">
    <label class="onoffswitch-label" for="{{switchId}}">
      <span class="onoffswitch-inner"></span>
      <span class="onoffswitch-switch"></span>
    </label>
  </div>
</div>

并调用它：

<h1>Switch Example</h1>
<div>
   <bm-input-switch switchId="autoCreate" switchName="autocreate" labelText="Auto Create" checked="false"></bm-input-switch>
</div>

<bm-input-switch switchId="displayCode" switchName="displayCode" labelText="Display Code" checked="false"></bm-input-switch>

On/Off CSS 中的 FlipSwitch 不能用作 Angular 2 组件

On/Off FlipSwitch in CSS not working as an Angular 2 Component

angular2-components

angular