Question

在发布这个问题之前，我已经找到了真正的好处，
我发现类似于我的问题的问题，但没有解决方案解决我的问题。

我创建了＆＃34;样式＆＃34;的角度组件。单选按钮。
我需要在不同的实例上多次重复使用它。

请看一下这张图片：

如何实现多个独立实例行为？

我的代码中相关部分的摘要：

父组件.ts文件：

    import { Component, ElementRef, ViewChild, AfterViewInit  } from '@angular/core';
    import { TxtZoneComponent } from './txtzone/txtzone.component';
    import { EditorDirective } from './txtzone/editor.directive';
    import { RadioButtonComponent } from './CustomControls/RadioButton';

    @Component({
        selector: 'my-app',
        templateUrl: 'app/app.component.html',
        styleUrls: ['app/App.css'],

    })
    export class AppComponent {
        public Myheader: string = "Line Breaker Web Application"
        public RadButtonBackColor: string = "rgb(50,50,50)"
        @ViewChild(EditorDirective) vc: EditorDirective;
        constructor()
        {

        }

}

父组件.html文件：

<div><MyRadBtn [Description]="'Break Word'" [BackColor]="RadButtonBackColor">Loading...</MyRadBtn></div>
<div><MyRadBtn [Description]="'SQL Mode'" [BackColor]="RadButtonBackColor">Loading...</MyRadBtn></div>

RadioButton组件.ts文件：

import { Component, Input, OnChanges, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
//import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

@Component({
    selector: 'MyRadBtn',
    templateUrl: 'app/CustomControls/RadioButton.html',
    styleUrls: ['app/CustomControls/RadioButtonStyleSheet.css'],
})



export class RadioButtonComponent
{


    @Input() BackColor: string = "rgb(50,50,50)";
    @Input() Description: string;
    constructor()
    {

    }

    ngOnChanges() {

    }

    clicked(): void
    {
        alert(this.Description);
    }
}

RadioButton .html文件：

<div class="breakwordcont" [ngStyle]="{'background-color': BackColor}">
    <div class="desc"><span>{{Description}}</span></div>
    <div class="control">
        <div class="slideOne">
            <input type='checkbox' value='None' id='slideOne' name='check' (click)="clicked()" />
            <label for="slideOne"></label>
        </div>
    </div>
    </div>

RadioButton .css文件：

input[type=checkbox] {
    visibility: hidden;
}


.slideOne {
    width: 50px;
    height: 10px;
    background: #333;
    margin: 5px auto;

    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    position: relative;

    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}

.slideOne label {
    display: block;
    width: 16px;
    height: 16px;

    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;

    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -ms-transition: all .4s ease;
    transition: all .4s ease;
    cursor: pointer;
    position: absolute;
    top: -3px;
    left: -3px;

    -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
    background: #fcfff4;

    background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
}

.slideOne input[type=checkbox]:checked + label {
    left: 37px;
}

.breakwordcont
{
    width:90%;
    font-size: 0.7em;

}

.desc {

    width:65px;
     height:30px;
    margin: 5px auto;
    margin-left:3px;
    display:inline-block;
    height:50%;
    float:left;
}

.control {
    width:60px;
    height:20px;
    display:inline-block;
    float:right;
}

为有相同问题的未来观众编辑

基于@deek回答这是我的固定代码中的相关更改：

1.将ID属性添加到radioButton .ts文件：

export class RadioButtonComponent
{
    @Input() ID: string;
// ... rest of class definitions...
}

从父组件传递每个单选按钮的ID：

  <div><MyRadBtn [ID]="'id-one'" [Description]="'Break Word'" [BackColor]="RadButtonBackColor">Loading...</MyRadBtn></div>
  <div><MyRadBtn [ID]="'id-two'" [Description]="'SQL Mode'"  [BackColor]="RadButtonBackColor">Loading...</MyRadBtn></div>

将输入的id绑定到css类：

 <div class="breakwordcont" [ngStyle]="{'background-color': BackColor}">
     <div class="desc"><span>{{Description}}</span></div>
     <div class="control">
         <div class="slideOne">
             <input type='checkbox' value='None' id={{ID}} name='check' />
             <label for={{ID}} (click)="clicked()"></label>
         </div>
     </div>
 </div>

Answer 1

编辑：输入[type =复选框]：选中+标签

仅在传入ID匹配点击元素时才应用此规则。

您的问题是Radio组件中输入的类和Id名称。

当它们被注入时，你的代码使它们具有相同的id和类名。

您需要将它们分成具有不同CSS / ID的单独组件，或者根据要应用的css采用输入参数来设置类名和ID。我建议后者。

你可能只是设置不同的ID取决于你的CSS如何（我没有读过它）。

<div><MyRadBtn [slideClass-ID]="id-one" [Description]="'Break Word'" [BackColor]="RadButtonBackColor">Loading...</MyRadBtn></div>
<div><MyRadBtn [slideClass-ID]="id-two" [Description]="'SQL Mode'" [BackColor]="RadButtonBackColor">Loading...</MyRadBtn></div>

然后将输入的id绑定到slideClass-ID。

在不同的实例

1 个答案: