Angular2 -使用服务在组件之间共享数据

import { Injectable } from '@angular/core';

@Injectable()
export class DataService {
  private sharedData: string;

  setSharedData(data: string) {
    this.sharedData = data;
  }

  getSharedData() {
    return this.sharedData;
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { DataService } from './data.service';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [DataService], // 注册DataService服务
  bootstrap: [AppComponent]
})
export class AppModule {}

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-component1',
  template: `
    <h1>Component 1</h1>
    <button (click)="setData()">Set Data</button>
  `
})
export class Component1 {
  constructor(private dataService: DataService) {}

  setData() {
    this.dataService.setSharedData('Shared data from Component 1');
  }
}

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-component2',
  template: `
    <h1>Component 2</h1>
    <button (click)="getData()">Get Data</button>
    <p>{{ sharedData }}</p>
  `
})
export class Component2 {
  sharedData: string;

  constructor(private dataService: DataService) {}

  getData() {
    this.sharedData = this.dataService.getSharedData();
  }
}