Interfejs Angular 2 do usługi

Chcę rozwinąć składnik wyszukiwania. Oto przypadek użycia:Interfejs Angular 2 do usługi

Ten składnik wywołuje usługę z parametrami wyszukiwanego hasła.
Usługa wywołuje punkt końcowy api i zwraca otrzymane obiekty jako kolekcję .
Komponent wyświetla wyniki w szablonie.

Chcę napisać tylko jeden składnik wyszukiwania, który może wywołać inną usługę w zależności od przypadku. Wyobraź Mam dwie usługi:

SearchInMaleEmployeeService
SearchInFemaleEmployeeService

Obie te usługi realizuje funkcję wyszukiwania powracającego listę pracownika. Chciałbym powiedzieć mojemu składnikowi, którą usługę w zależności od przypadku. W języku C# możemy użyć interfejsu do poinformowania konstruktora komponentu, z której usługi ma korzystać.

Jak mogę to zrobić w Angular2?

Dodatkowe pytanie: Jak mogę określić, który szablon będzie używany do renderowania wyników wyszukiwania w zależności od typu obiektu zwróconego przez usługę?

Źródło

2016-10-16 Ben

Chcesz dynamicznie przełączać między usługami lub chcesz wstrzyknąć odpowiednią usługę w konstruktorze komponentu? – Sefa

Nie chcę przełączać dynamicznie. Chcę używać tego samego searchComponent w różnych miejscach z inną usługą. Ale nie dynamicznie. – Ben

Można to osiągnąć poprzez wstrzyknięcie zależności.

Tak jak powiedziałeś, utwórz dwie różne usługi implementujące ten sam interfejs ISearchService.

Podczas korzystania z SearchComponent należy podać odpowiednią klasę usług z modułu do ServiceComponent.

Twój SearchComponent wyglądałby

constructor(private searchService: ISearchService) {}

oraz podczas używania SearchComponent w różnych miejscach zapewnić wystąpienie usługi:

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

lub

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

Więcej informacji o Angular2 wstrzykiwania zależności here.

Aktualizacja:

Jak podkreślił Ben

Zapewnienie oświadczenie musi być zakodowany jako

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

I wstrzyknąć klasy, do komponentu:

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

Źródło

2016-10-16 08:58:47 Sefa

Gdzie muszę napisać kod, aby dostarczyć instancję usługi? – Ben

Próbuję dodać kod do app.component, ale mam błąd: '@Component ({selector: 'app-root', templateUrl: 'app.component.html', provider: [{provide: ISearchService, useValue: SearchInMaleEmployeeService},]}) '. Błąd: nie można znaleźć nazwy "ISearchService". Ale import działa bez błędów: 'import {ISearchService} z './_ services/searchservice/interface/isearchservice.interface';' – Ben

To dlatego, że interfejs nie jest wstrzykiwany. Muszę użyć podanej nazwy jako ciągu. Ale teraz, gdy uruchamiam program, mam błąd: "Nie można rozwiązać wszystkich parametrów dla SearchComponent: (AuthService, NgZone,?)." Oznacza to, że Angular 2 nie wie, jak rozwiązać ten interfejs. – Ben

Tak, możesz to zrobić tak jak Sefa Ümit Oray odpowiedział powyżej.Ale jak rozumiem, próbujesz filtrować dwa typy obiektów na liście i chcesz użyć obu. Dlaczego więc nie piszesz usługi, która ma dwie metody wyszukiwania różnic. Lub możesz napisać metodę, która przeszukuje oba typy obiektów.

Na żądanie możesz użyć instance of, aby sprawdzić typ obiektu. Następnie użyj Pipe w połączeniu z ngIf, aby renderować to, co chcesz.

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

Źródło

2016-10-16 09:19:04

Interfejs Angular 2 do usługi

Odpowiedz

Powiązane problemy