異なるインスタンスでコンポーネントを何度も再利用

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

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

同じ問題との将来の視聴者EDIT

---

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

CSSクラスへの入力のIDを結合：

<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

EDIT：入力[タイプ=チェックボックス]：チェック+ラベル

は、クリックされた要素と一致するIDで渡された場合にのみこのルールを適用します。

問題は、ラジオコンポーネントの入力のクラス名と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> 

次に、slideClass-IDへの入力のIDをバインドします。