ionic2
Использование сервисов
Поиск…
замечания
Одна очень важная вещь об использовании общих служб заключается в том, что они должны быть включены в массив providers самого верхнего компонента, где они должны использоваться совместно.
Это почему? Ну, предположим, что мы MyService ссылку MyService в массив providers из каждого Component . Что-то вроде:
@Component({
templateUrl:"page1.html",
providers: [MyService]
})
А также
@Component({
templateUrl:"page2.html",
providers: [MyService]
})
Таким образом, для каждого компонента будет создан новый экземпляр службы, поэтому экземпляр, где одна страница будет сохранять данные, будет отличаться от экземпляра, используемого для получения данных. Так что это не сработает.
Чтобы все приложение использовало один и тот же экземпляр (чтобы служба работала как однопользовательская служба), мы можем добавить ее ссылку в App Component следующим образом:
@Component({
template: '<ion-nav [root]="rootPage"></ion-nav>',
providers: [MyService]
})
Вы также можете добавить ссылку MyService в ionicBootstrap(MyApp, [MyService]); но в соответствии с инструкциями по стилю Angular2
Предоставляйте услуги инжектору Angular 2 в самом верхнем компоненте, где они будут использоваться совместно.
Зачем? Инжектор Angular 2 является иерархическим.
Зачем? При предоставлении услуги компоненту верхнего уровня этот экземпляр является общим и доступен для всех дочерних компонентов этого компонента верхнего уровня.
Зачем? Это идеально, когда служба использует методы или состояние.
Зачем? Это не идеально, когда двум различным компонентам нужны разные экземпляры службы. В этом случае было бы лучше предоставить службу на уровне компонента, для которого нужен новый и отдельный экземпляр.
А также
Это будет работать. Это не лучшая практика. Опция поставщика бутстрапов предназначена для настройки и переопределения собственных предварительно зарегистрированных сервисов Angular , таких как поддержка маршрутизации.
... App Component был бы лучшим выбором.
Разделять информацию между разными страницами
Один из самых простых примеров использования общих служб - это когда мы хотим хранить некоторые данные с данной страницы нашего приложения, а затем снова получать эти данные, но с другой страницы.
Один из вариантов может состоять в том, чтобы отправить эти данные в качестве параметра (например, если одна страница вызывает другую), но если мы хотим использовать эти данные из совершенно другой части приложения, это, по-видимому, не лучший способ сделать Это. Вот когда приходят совместные сервисы .
В этом примере мы собираемся использовать простой сервис под названием MyService который имеет только два простых метода: saveMessage() чтобы сохранить строку и getMessage() чтобы получить ее снова. Этот код является частью этого рабочего плунжера, где вы можете увидеть его в действии.
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;
}
}
Затем, когда мы хотим сохранить новое сообщение, мы можем просто использовать saveMessage(theMessageWeWantToSave); метод из экземпляра MyService (называемый просто 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);
}
}
Точно так же, когда мы хотим получить эти данные, мы можем использовать метод getMessage() из экземпляра службы следующим образом:
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();
}
// ...
}
Не забудьте проверить раздел « Примечания », чтобы узнать, где должна быть включена ссылка для службы MyService и почему.