Giao diện góc 2 cho dịch vụ

Question

Tôi muốn phát triển thành phần tìm kiếm. Đây là trường hợp sử dụng:

1. Thành phần này gọi dịch vụ với thông số cụm từ tìm kiếm.
2. Dịch vụ gọi điểm cuối api và trả về đối tượng kết quả dưới dạng bộ sưu tập .
3. Thành phần hiển thị kết quả trong mẫu.

Tôi muốn chỉ viết một thành phần tìm kiếm có thể gọi dịch vụ khác nhau tùy thuộc vào từng trường hợp. Hãy tưởng tượng tôi có hai dịch vụ:

1. SearchInMaleEmployeeService
2. SearchInFemaleEmployeeService

Cả hai dịch vụ thực hiện một chức năng tìm kiếm trả về một danh sách các nhân viên. Tôi muốn thông báo cho thành phần của tôi về dịch vụ tùy thuộc vào từng trường hợp. Trong C#, chúng ta có thể sử dụng giao diện để nói cho constructor thành phần sử dụng dịch vụ nào.

Tôi có thể làm điều đó như thế nào trong Angular2?

Câu hỏi bổ sung: Làm cách nào để nói thành phần của tôi sử dụng mẫu nào để hiển thị kết quả tìm kiếm tùy thuộc vào loại đối tượng được dịch vụ trả về?

Answer 1

Bạn có thể đạt được điều này thông qua việc tiêm phụ thuộc.

Như bạn đã nói, hãy tạo hai dịch vụ khác nhau triển khai cùng một giao diện ISearchService.

Khi sử dụng SearchComponent, hãy cung cấp lớp dịch vụ thích hợp từ mô-đun đến ServiceComponent.

SearchComponent của bạn sẽ trông giống như

constructor(private searchService: ISearchService) {} 

Và khi sử dụng SearchComponent tại nhiều nơi khác nhau cung cấp ví dụ dịch vụ:

providers: [ 
    { provide: ISearchService, useValue: SearchInMaleEmployeeService} 
] 

hoặc

providers: [ 
    { provide: ISearchService, useValue: SearchInFemaleEmployeeService} 
] 

Thông tin thêm về Angular2 dependency injection here.

Cập nhật:

Như đã chỉ ra bởi Ben

Cung cấp tuyên bố cần phải được mã hóa như

provide('ISearchService', {useClass: SearchInMaleEmployeeService}) 

Và để tiêm các lớp học để thành phần:

constructor(@Inject('ISearchService') private searchService:ISearchService) {} 

Answer 2

Có, bạn có thể làm điều đó như Sefa Ümit Oray đã trả lời ở trên.Nhưng như tôi hiểu, bạn đang cố gắng lọc hai loại đối tượng trong danh sách và bạn muốn sử dụng cả hai. Vậy tại sao bạn không viết một dịch vụ có hai phương pháp tìm kiếm khác nhau. Hoặc bạn có thể viết một phương thức tìm kiếm trong cả hai loại đối tượng.

Khi bạn hỏi, bạn có thể sử dụng instance of để kiểm tra loại đối tượng. Sau đó, sử dụng Pipe kết hợp với ngIf để làm hiển thị những gì bạn muốn.

https://angular.io/docs/ts/latest/guide/pipes.html https://angular.io/docs/ts/latest/api/common/index/NgIf-directive.html