在不同頁面之間共享資訊

使用共享服務的最簡單示例之一是我們想要從應用程式的給定頁面儲存一些資料，然後從另一個頁面再次獲取該資料。

一個選項可能是將該資料作為引數傳送（例如，如果一個頁面呼叫另一個頁面）但如果我們想要從應用程式的完全不同的部分使用該資料，那麼這似乎不是最好的方法它。那是共享服務發揮作用的時候。

在這個例子中，我們將使用一個名為 MyService 的簡單服務，它只有兩個簡單的方法：saveMessage() 儲存字串，getMessage() 再次獲取它。此程式碼是此工作 plunker 的一部分，你可以在其中檢視它的實際執行情況。

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;
  }
}

然後，當我們想要儲存新訊息時，我們可以使用 MyService 例項中的 saveMessage(theMessageWeWantToSave); 方法（稱為 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 服務的參考應包含在哪裡以及原因。