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

# Angular 2 中使用服务在组件之间共享数据

bash
ng generate service data

typescript
// data.service.ts
import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root',
})
export class DataService {
  constructor() {}
}

typescript
// data.service.ts
import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root',
})
export class DataService {
  sharedData: string = '';
  getSharedData(): string {
    return this.sharedData;
  }
  setSharedData(data: string): void {
    this.sharedData = data;
  }
  constructor() {}
}

typescript
// sender.component.ts
import { Component } from '@angular/core';
import { DataService } from '../data.service';
@Component({
  selector: 'app-sender',
  template: `
    
      Enter Data:
      
      Send Data
    
  `,
})
export class SenderComponent {
  dataToSend: string = '';
  constructor(private dataService: DataService) {}
  sendData(): void {
    this.dataService.setSharedData(this.dataToSend);
  }
}

typescript
// receiver.component.ts
import { Component } from '@angular/core';
import { DataService } from '../data.service';
@Component({
  selector: 'app-receiver',
  template: `
    
      Received Data: {{ receivedData }}
    
  `,
})
export class ReceiverComponent {
  receivedData: string = '';
  constructor(private dataService: DataService) {
    this.receivedData = this.dataService.getSharedData();
  }
}