在angular中使用特定領域的服務作為普通服務的一部分，推薦的方式是什么？

我是angular的一個初學者。

我有很多代碼在我的很多組件中都是重復的。 像這樣：

onScroll() {
    this.pageNumber  ;
    if (this.pageNumber <= this.pageLimit) {
        如果（this.tableMode === FormMode.READ） {
            this.domainSpecificService.fetchPage(this.pageNumber, this.pageSize).subscribe(response => {
                this.entities.push(...resports.content)。
                this.numberOfElements  = responses.numberOfElements;
                this.totalElements = responses.totalElements。
            });
        } else if (this.tableMode === FormMode.FILTER) {
            如果（this.pageNumber <= this.pageLimit） {
                this.domainSpecificService.fetchPage(this.pageNumber, this.pageSize, this.filter!).subscribe(response => {
                    this.entities.push(...resports.content)。
                    this.numberOfElements  = responses.numberOfElements;
                    this.totalElements = responses.totalElements。
                });
            }
        }
    }
}

openModal(formMode: FormMode, entity?: EntityType) {
    const modalRef = this.modalService.open(EntityModalComponent, { size: 'xl', scrollable: true }) 。
    modalRef.componentInstance.formMode = formMode;
    modalRef.componentInstance.entity = entity。
    this.returnModalResult(modalRef)。
}

returnModalResult(modalRef: NgbModalRef) {
    modalRef.componentInstance.returnedEntity.subscribe(( response: { entity: EntityType, formMode: FormMode }) => {
        如果（response.formMode === FormMode.CREATE） {
            this.pageNumber = 0;
            this.domainSpecificService.fetchPage(0, this.pageSize).subscribe(response => {
                this.entities = [...resports.content];
                this.numberOfElements = 0;
                this.numberOfElements  = responses.numberOfElements;
                this.totalElements = responses.totalElements。
            });
        } else if (response.formMode === FormMode.UPDATE) {
            let itemIndex = this.entities.findIndex(item => item.id == response.entity.id)。
            this.entities[itemIndex] = response.entity。
        } else if (response.formMode === FormMode.FILTER) {
            this.filter = response.entity。
            this.tableMode = FormMode.FILTER;
            this.pageNumber = 0;
            this.domainSpecificService.fetchPage(0, this.pageSize, this.filter).subscribe(response => {
                this.entities = [...resports.content];
                this.numberOfElements = 0;
                this.numberOfElements  = responses.numberOfElements;
                this.totalElements = responses.totalElements。
            });
        }
    })
}

domainSpecificService和modal是唯一因組件而異的。我想知道對于這種情況，推薦的方法是什么。

執行服務，我們將domainSpecificService作為引數從組件中傳出？ onScroll(data: ComponentState, apiService: any)

......或者是組件。

......還是組件的繼承性？

uj5u.com熱心網友回復：

我將使用組件繼承。

然后你也可以定義一個api介面，而不把它放在特定領域服務上。你仍然可以在基礎組件和使用超級建構式時獲得型別檢查。

將所有被訪問的變數移到基礎組件中，并將所有對this.domainSpecificService的參考替換為this.apiService：

//base-table.component.ts;
介面 ApiService {
   fetchPage: (pageNumber: number, pageSize: number, filter: any) => Observable<any> 。
}

@Directive()
public BaseTableComponent {
  public pageNumber: number;
  public pageSize: number;
  public pageLimit: number;
  public entities: any[];
  public numberOfElements: number;
  public totalElements: number;
  public tableMode: formMode;
  公共過濾器：任何。

  constructor(protected apiService: ApiService, protected modalService: ModaleService) {}.

onScroll() {
    this.pageNumber  ;
    如果（this.pageNumber <= this.pageLimit） {
        如果（this.tableMode === FormMode.READ） {
            this.apiService.fetchPage(this.pageNumber, this.pageSize).subscribe(response => {
                this.entities.push(...resports.content)。
                this.numberOfElements  = responses.numberOfElements;
                this.totalElements = responses.totalElements。
            });
        } else if (this.tableMode === FormMode.FILTER) {
            如果（this.pageNumber <= this.pageLimit） {
                this.apiService.fetchPage(this.pageNumber, this.pageSize, this.filter!).subscribe(response => {
                    this.entities.push(...resports.content)。
                    this.numberOfElements  = responses.numberOfElements;
                    this.totalElements = responses.totalElements。
                });
            }
        }
    }
}

openModal(formMode: FormMode, entity?: EntityType) {
    const modalRef = this.modalService.open(EntityModalComponent, { size: 'xl', scrollable: true }) 。
    modalRef.componentInstance.formMode = formMode;
    modalRef.componentInstance.entity = entity。
    this.returnModalResult(modalRef)。
}

returnModalResult(modalRef: NgbModalRef) {
    modalRef.componentInstance.returnedEntity.subscribe(( response: { entity: EntityType, formMode: FormMode }) => {
        如果（response.formMode === FormMode.CREATE） {
            this.pageNumber = 0;
            this.apiService.fetchPage(0, this.pageSize).subscribe(response => {
                this.entities = [...resports.content];
                this.numberOfElements = 0;
                this.numberOfElements  = responses.numberOfElements;
                this.totalElements = responses.totalElements。
            });
        } else if (response.formMode === FormMode.UPDATE) {
            let itemIndex = this.entities.findIndex(item => item.id == response.entity.id)。
            this.entities[itemIndex] = response.entity。
        } else if (response.formMode === FormMode.FILTER) {
            this.filter = response.entity。
            this.tableMode = FormMode.FILTER;
            this.pageNumber = 0;
            this.apiService.fetchPage(0, this.pageSize, this.filter).subscribe(response => {
                this.entities = [...resports.content];
                this.numberOfElements = 0;
                this.numberOfElements  = responses.numberOfElements;
                this.totalElements = responses.totalElements。
            });
        }
    })
}
}

在一個域組件中使用這個方法，比如：

// example-domain.component.ts @Component(...) public ExampleDomainComponent extends BaseTableComponent { constructor(domainService: DomainSpecificService, modalService: ModalService) { super(domainService, modalService); }

標籤：

上一篇：在AngularApp初始化時獲取初始URL

下一篇：我怎么能在每隔5行就遞增1，只要另一行是相同的？