同じ部品の2つを避けて角をつける角度

Question

私はタブ用のコンポーネントを持っていますが、それ自体の変数があり、本当にうまく機能しますが、同じページに他のタブを置くと、選択されたタブの値が1つであれば、別のタブコンポーネントも変更されます。

これは私のタブコンポーネントです：

<sys-tab> 
     <sys-tab-content title="Principal"> 
     Content 1 
     </sys-tab-content> 
    <sys-tab-content title="Complementar"> 
      Content 2 
     </sys-tab-content> 
    </sys-tab> 
<sys-tab> 
     <sys-tab-content title="Principal"> 
     Content 3 
     </sys-tab-content> 
    <sys-tab-content title="Complementar"> 
      Content 4 
     </sys-tab-content> 
    </sys-tab> 

：私はこのような何かを行う場合

<sys-tab> 
    <sys-tab-content title="Principal"> 
    Content 1 
    </sys-tab-content> 
    <sys-tab-content title="Complementar"> 
    Content 2 
    </sys-tab-content> 
</sys-tab> 

しかし：私はこのようにそれを使用する場合、それが本当にうまく動作

@Component({ 
    selector: 'sys-tab', 
    styleUrls: ['./shared/sys.css'], 
    template: ` 
    <div class="tabs"> 
     <div *ngFor="let tab of tabs; let i = index" (click)="selectTab(tab)"> 
     <input id="tab-{{i+1}}" type="radio" name="radio-set" class="tab-selector-{{i+1}}" [checked]="i===0"/> 
     <label for="tab-{{i+1}}" class="tab-label-{{i+1}}">{{tab.title}}</label> 
     </div> 
     <div class="content"> 
     <ng-content></ng-content> 
     </div> 
    </div> 
    `, 
}) 

export class TabView { 
    tabs: TabViewContent[] = []; 
    addTab(tab: TabViewContent) { 
    if (this.tabs.length === 0) 
     tab.active = true; 
    this.tabs.push(tab); 
    } 

    selectTab(tab) { 
    this.tabs.forEach((tab) => { 
     tab.active = false; 
    }); 
    tab.active = true; 
    } 
} 

@Component({ 
    selector: 'sys-tab-content', 
    styleUrls: ['./shared/sys.css'], 
    template: `  
     <div class="content-2" [hidden]="!active"> 
     <ng-content></ng-content> 
     </div> 
    ` 
}) 
export class TabViewContent { 

    active: boolean; 

    @Input() title: string; 

    constructor(tabs: TabView) { 
    tabs.addTab(this); 
    } 

} 

最初のコンポーネントの値を変更すると、2番目の値とその逆の値も変更されます。

Answer 1

あなたはinput[radio]グループごとに別の名前を指定する必要があります。すべてのコントロールのための

name="{{id}}-radio-set" 

とユニークidとfor属性を。だからここ

は、それを行うことができる方法である：

完璧なソリューションでした

let nextId = 0; 

@Component({ 
    selector: 'sys-tab', 
    template: ` 
     ... 
     <input id="{{id}}-tab-{{i+1}}" ... name="{{id}}-radio-set" .../> 
     <label for="{{id}}-tab-{{i+1}}" ...></label> 
     ... 
    `, 
}) 
export class TabView { 
    id = `tabview-${nextId++}`; 

Plunker Example