Question

我正在将我的应用程序从jquery移动到angular 5。

我有一个名为citySelect.Component.html

的组件

在其中我有3个选择框 - 国家，省和城市

在我的城市选择我有

citySelect.Component.html

  <select (change)="onCitySelect($event.target.value)">
                <option value="">--Select--</option>
                <option *ngFor="let c of cities" value={{c.id}}>
                    {{c.cityName}}
                </option>
            </select>

citySelect.Component.ts

onCitySelect(cityId: string) {
    if (cityId != "") {
        this.data.getCityPersons(cityId);
    }
}

getCityPersons是dataService.ts中的一个方法，它将人员存储在同一数据服务中的数组属性中，允许该数组被另一个组件personForm.component

使用

dataService.ts

public persons: Person[];
public personsChange: Subject<Person[]> = new Subject<Person[] >();



getCityPersons(cityId: string) {
    this.loadCityPersons(cityId)
        .subscribe(success => {
            if (success) {
                this.personsChange.next(this.persons);
            }
        });
}

这一切都正常。但是，我需要将citySelect.Component重复用于报告和其他表单。

我能想到的重用解决方案是可以将@Input传递给citySelect，然后根据city中的if语句选择例如

citySelect.Component.ts

@Input() formName: string;
...
onCitySelect(cityId: string) {
    if (this.cityId != "") {
        switch(this.formName) { 
           case 'cityPatient': { 
              this.data.getCityPersons(cityId);
              break; 
           } 
           case 'cityReport1': { 
              this.data.fetchCityReport1(cityId);
              break; 
           } 
            case 'cityCityStats': { 
              this.data.fetchCityStats(cityId);
              break; 
           } 
        } 
    }
}

上述每个获取组件都会获取数据服务中的不同数组对象，而这些数组服务又会在不同的组件中被引用。

如何修复代码，使组件更加孤立，无法知道为不同数据选择重用组件的各个页面必须获取哪些数据

使用jquery，我可以在各个页面中的citySelect上有一个事件，只需重用该组件而不必使用switch语句。

Answer 1

最好的解决方案是不使用@Input而是使用@Output。每次用户选择一个人时，您都可以调用输出事件。

<app-city-select (personSelected)="getCityPersons($event)"></app-city-select>
<app-city-select (personSelected)="fetchCityReport($event)"></app-city-select>
<app-city-select (personSelected)="fetchCityStats($event)"></app-city-select>

不使用switch语句重用Angular组件来加载不同的数据

1 个答案: