CSS 中的开/关翻转开关不作为 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-input-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-input-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]绑定以在switch组件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>