ionic2
서비스 사용
수색…
비고
공유 서비스 사용에있어 매우 중요한 점 중 하나는 공유되어야하는 최상위 구성 요소의 providers 배열에 포함되어야한다는 것입니다.
왜 그런가요? 자, 각 Component 의 providers 배열에 MyService 참조를 포함한다고 가정 해 봅시다. 같은 것 :
@Component({
templateUrl:"page1.html",
providers: [MyService]
})
과
@Component({
templateUrl:"page2.html",
providers: [MyService]
})
이렇게하면 각 구성 요소에 대해 서비스의 새 인스턴스가 만들어 지므로 한 페이지가 데이터를 저장할 인스턴스가 데이터를 가져 오는 데 사용 된 인스턴스와 달라집니다. 그래서 그것은 효과가 없을 것입니다.
전체 앱이 동일한 인스턴스를 사용하도록 (서비스가 싱글 톤 서비스로 작동하도록) App Component 과 같이 참조를 추가 할 수 있습니다.
@Component({
template: '<ion-nav [root]="rootPage"></ion-nav>',
providers: [MyService]
})
ionicBootstrap(MyApp, [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); 사용할 수 있습니다 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 서비스에 대한 참조가 포함되어야하는 이유와 그 이유에 대해서는 Remarks 섹션을 확인하십시오.