javascript - 避免两个相同的组件互相改变 Angular

Question

我有一个选项卡组件，它有自己的变量，而且效果非常好，但问题是，如果我在同一页面中再次放置其他选项卡，当我更改所选选项卡的值时，它会还更改其他选项卡组件。

这是我的选项卡组件:

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

}

如果我这样使用它，效果真的很好:

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

当我更改第一个组件的值时，它也会更改第二个组件的值，反之亦然。

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