角7中的多个共享级联组合体组件

Question

我创建了一个组件，用于管理级联国家和州。如果我只把一个国家和一个国家组成，一切都是完美的。但是，当我把三个国家和国家放在一起，那么一切都是腐败的，就像下面的例子一样。我怎样才能做到这一点？

一国状态(工作示例)

斯塔克布利茨

三国状态(不工作示例)

斯塔克布利茨

Answer 1

有两个元素引用相同的变量：

<app-country [studentForm]="studentForm"></app-country>
<app-state [studentForm]="studentForm"></app-state>

<br/><br/>

<app-country [studentForm]="studentForm"></app-country>
<app-state [studentForm]="studentForm"></app-state> 

每个组件都可以访问studentForm类的相同属性。如果希望单独填充该组件组，则必须编写如下内容：

app.component.ts:

 this.studentForm = new FormGroup({
  'studentName':new FormControl(''),
  'countryId1': new FormControl(''),
  'stateId1': new FormControl(''),
  'countryId2': new FormControl(''),
  'stateId2': new FormControl('')
})

app.component.html：

<app-country [studentForm]="studentForm" [id]="'countryId1'"></app-country>
<app-state [studentForm]="studentForm" [id]="'stateId1'" [countryId]="'countryId1'"></app-state>

<br/><br/>

<app-country [studentForm]="studentForm" [id]="'countryId2'"></app-country>
<app-state [studentForm]="studentForm" [id]="'stateId2'" [countryId]="'countryId2'"></app-state>

并且在您的国家和州组件中，分别使用country Id1/ country Id2和state Id1/StateId2(还需要修改country和state组件以使用'id‘参数)。

更新

在country.component.ts中添加

@Input() id: string;

在state.component.ts中添加

@Input() id:string;
@Input() countryId:string;

get states(): State[]{
   var val = this.studentForm.controls[this.countryId].value;
   return this.selectService.filterStates(val);
};

在country/state.component.html中，更改为：

<select [formControlName]="id">...

在select.service.ts变更中：

filterStates(countryId){
   if(!countryId) return null;
   return this.getStates().filter((item) => item.countryid == countryId);
}