在不同的實例上多次重複使用組件

Question

我在發佈該問題之前搜索了真正的好東西，
我發現類似於我的問題的問題，但沒有解決方案解決我的問題。

我創建了「樣式」單選按鈕的角度組件。
我需要在不同的實例上多次重複使用它。

請看看這個圖片：

我如何能實現多個獨立實例的行爲嗎？

在我的代碼的相關部分的摘要：

父組件的.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); 
    } 
} 

單選按鈕。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> 

單選按鈕的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屬性爲單選按鈕。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

編輯：輸入[類型=複選框]：檢查+標籤

如果傳入ID與點擊元素匹配，則僅應用此規則。

您的問題是Radio組件中輸入的類和Id名稱。

當它們被注入時，你的代碼擁有相同的id和類名。

您將需要使用不同的CSS/ID將它們分成不同的組件，或者根據您要應用的CSS來採用輸入參數來設置類名稱和ID。我建議後者。

你可能只需根據你的CSS是如何設置不同的ID（我沒有讀過它）。

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