Javascript 避免两个相同的组件相互改变角度

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

这是我的选项卡组件：

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

}

@组件({
选择器：“系统选项卡”，
样式URL:['./shared/sys.css']，
模板：`
{{tab.title}}
`,
})
导出类选项卡视图{
选项卡：选项卡视图内容[]=[]；
添加选项卡（选项卡：选项卡视图内容）{
if（this.tabs.length==0）
tab.active=true；
这个.tabs.push（tab）；
}
选择选项卡（选项卡）{
this.tabs.forEach（（tab）=>{
tab.active=false；
});
tab.active=true；
}
}
@组成部分({
选择器：“系统选项卡内容”，
样式URL:['./shared/sys.css']，
模板：`
`
})
导出类TabViewContent{
活动：布尔值；
@输入（）标题：字符串；
构造函数（选项卡：选项卡视图）{
tabs.addTab（这个）；
}
}

如果我这样使用，效果非常好：

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

内容1
内容2

但如果我这样做：

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

内容1
内容2
内容3
内容4

---

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

您应该为每个

输入[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++}`;

设nextId=0；
@组成部分({
选择器：“系统选项卡”，
模板：`
...
...
`,
})
导出类选项卡视图{
id=`tabview-${nextId++}`；

---

这是一个完美的解决方案……非常感谢