Angular2의 공유 RadioButton 구성 요소

Question

동일한 페이지에서 구성 요소를 재사용하고 싶지만 현재 작업중인 구성에 따라 라디오 버튼의 값을 정의하는 데 문제가 있습니다.

세 가지 공유 구성 요소가 있는데 그 차이점을 파악하는 방법을 모르겠습니다. 첫 번째로 작업하면 다른 두 구성 요소가 수정되는 것을 원하지 않습니다. "과감한"모드를 사용하여 해결했습니다. 더 잘하고 싶습니다. 모든 제안을 부탁드립니다.

여기 내 HTML 코드입니다 :

이

<div class="ui form"> 
    <div class="inline fields"> 
    <label for="fruit">Send to:</label> 
    <div class="field"> 
     <div class="ui radio checkbox"> 
     <input type="radio" name="radio{{A}}{{B}}" value="selected" [(ngModel)]="option"> 
     <label>Send Selected</label> 
     </div> 
    </div> 
    <div class="field"> 
     <div class="ui radio checkbox"> 
     <input type="radio" name="radio{{A}}{{B}}" value="all" [(ngModel)]="option"> 
     <label>Send All</label> 
     </div> 
    </div> 
    </div> 
</div> 

내가 뭘 방법은 부울있는 값 A와 B를 선언하는 것입니다,하지만 난 그것을 해결하기 위해 나쁜 방법이라고 생각합니다. 자신의 구성 요소에서

변수는 다음과 같습니다

@Input() A: boolean; 
@Input() B: boolean; 
@Input() C: boolean; 
private option: string = 'selected'; 

이 솔루션을 개선하기 위해 어떤 방법이 있습니까? :

name="radio{{A}}{{B}}" 

Answer 1

은 A, B와 C는 역할을 어떤 목적으로 조금 불분명하지만, 심각하게 당신이 사용할 수있는 유일한 가능한 인스턴스의 양을 제한 할 만 2 논리 값을 사용.

에 관계없이, 나는 다음 중 하나를 수행합니다 : 나머지

• 구성 요소가 OnInit에 호출 할 구성 요소의 각 인스턴스에 대해 고유 한 name의를 생성하는 서비스를 만들고 가게를 그 평생 (물론 당신은 OnDestroy을 재활용 할 수 있습니다).

• 라디오 그룹의 이름으로 @Input을 추가하고 구성 요소의 소비자가 그룹의 이름을 지정하게하십시오.

UPDATE :

난 그냥 당신이, 당신이 그것을 생략 할 수 name= 속성을 사용하지 않아도 눈치 각도 자동으로 그룹 라디오 입력을 그들이 동일한에 [(ngModel)]를 사용하여 결합 할 때 "일 ".