ionic2
Korzystanie z usług
Szukaj…
Uwagi
Jedną bardzo ważną rzeczą dotyczącą korzystania z usług wspólnych jest to, że muszą one zostać uwzględnione w tablicy providers najwyższego komponentu, w którym muszą być udostępniane.
Dlaczego? Załóżmy, że uwzględniamy odwołanie MyService do tablicy providers każdego Component . Coś jak:
@Component({
templateUrl:"page1.html",
providers: [MyService]
})
I
@Component({
templateUrl:"page2.html",
providers: [MyService]
})
W ten sposób zostanie utworzona nowa instancja usługi dla każdego komponentu, więc instancja, w której jedna strona zapisze dane, będzie inna niż instancja użyta do uzyskania danych. Więc to nie zadziała.
Aby cała aplikacja korzystała z tego samego wystąpienia (dzięki czemu usługa działa jako usługa singleton ), możemy dodać jej odwołanie w App Component następujący sposób:
@Component({
template: '<ion-nav [root]="rootPage"></ion-nav>',
providers: [MyService]
})
Możesz także dodać odwołanie MyService w ionicBootstrap(MyApp, [MyService]); ale według przewodników stylu Angular2
Zapewnij usługi wtryskiwaczowi Angular 2 w najwyższym komponencie, w którym będą udostępniane.
Dlaczego? Wtryskiwacz Angular 2 jest hierarchiczny.
Dlaczego? Podczas świadczenia usługi komponentowi najwyższego poziomu instancja ta jest udostępniana i dostępna dla wszystkich komponentów potomnych tego komponentu najwyższego poziomu.
Dlaczego? Jest to idealne rozwiązanie, gdy usługa udostępnia metody lub stan.
Dlaczego? Nie jest to idealne, gdy dwa różne składniki wymagają różnych wystąpień usługi. W tym scenariuszu lepiej byłoby zapewnić usługę na poziomie komponentu, który potrzebuje nowej i oddzielnej instancji.
I
To będzie działać. To po prostu nie jest najlepsza praktyka. Opcja dostawcy bootstrap służy do konfigurowania i zastępowania własnych wstępnie zarejestrowanych usług Angular , takich jak obsługa routingu.
... App Component byłby najlepszym wyborem.
Udostępniaj informacje między różnymi stronami
Jednym z najłatwiejszych przykładów korzystania z usług wspólnych jest to, że chcemy przechowywać niektóre dane z danej strony naszej aplikacji, a następnie odzyskać je ponownie, ale z innej strony.
Jedną z opcji może być przesłanie tych danych jako parametru (na przykład, jeśli jedna strona wywołuje drugą), ale jeśli chcemy wykorzystać te dane z zupełnie innej części aplikacji, wydaje się, że nie jest to najlepszy sposób na zrobienie tego to. Właśnie wtedy pojawiają się usługi wspólne .
W tym przykładzie użyjemy prostej usługi o nazwie MyService która ma tylko dwie proste metody: saveMessage() do przechowywania ciągu i getMessage() aby uzyskać go ponownie. Ten kod jest częścią tego działającego plunkera, gdzie można go zobaczyć w akcji.
import {Injectable} from '@angular/core';
@Injectable()
export class MyService {
private message: string;
constructor(){ }
public saveMessage(theMessage: string): void {
this.message = theMessage;
}
public getMessage(): string {
return this.message;
}
}
Następnie, gdy chcemy zapisać nową wiadomość, możemy po prostu użyć saveMessage(theMessageWeWantToSave); Metoda z instancji MyService (nazywana tylko service ).
import { Component } from "@angular/core";
import { MyService } from 'service.ts';
@Component({
templateUrl:"page1.html"
})
export class Page1 {
message: string;
// ...
public saveSecretMessage(): void {
this.service.saveMessage(this.message);
}
}
W ten sam sposób, gdy chcemy uzyskać te dane, możemy użyć metody getMessage() z instancji usługi w następujący sposób:
import { Component } from "@angular/core";
import { MyService } from 'service.ts';
@Component({
templateUrl:"page2.html"
})
export class Page2 {
enteredMessage: string;
constructor(private service: MyService) {
this.enteredMessage = this.service.getMessage();
}
// ...
}
Pamiętaj, aby sprawdzić sekcję Uwagi, aby zobaczyć, gdzie należy uwzględnić odniesienie do usługi MyService i dlaczego.