Angular 在不同的实例上多次重用组件

在发表这个问题之前，我已经搜索了很多东西，
我发现问题与我的问题相似，但没有解决我问题的方法。

我已经创建了“styled”单选按钮的角度组件。
我需要在不同的实例上多次重用它

请看这张图片：

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

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

父组件.ts文件：

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

父组件.html文件：

RadioButton.html文件：

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

---

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

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>

{{Description}}

---

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

仅当传入的ID与单击的元素匹配时应用此规则

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

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

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

你可以根据你的css设置不同的ID（我还没有全部读过）

正在加载。。。
加载。。。

---

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

谢谢！它为我节省了很多时间，非常直观（-：或者，您可以为

RadioButtonComponent

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

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

  <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>

 <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>

<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>