在不同页面之间共享信息

Created: November-22, 2018

使用共享服务的最简单示例之一是我们想要从应用程序的给定页面存储一些数据，然后从另一个页面再次获取该数据。

一个选项可能是将该数据作为参数发送（例如，如果一个页面调用另一个页面）但如果我们想要从应用程序的完全不同的部分使用该数据，那么这似乎不是最好的方法它。那是共享服务发挥作用的时候。

在这个例子中，我们将使用一个名为 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();
  }
    
  // ...
}