在多个组件上使用service.ts变量

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private sharedVariable: string;

  constructor() { }

  getSharedVariable(): string {
    return this.sharedVariable;
  }

  setSharedVariable(value: string): void {
    this.sharedVariable = value;
  }
}

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], // 添加服务到提供商数组中
  bootstrap: [AppComponent]
})
export class AppModule { }

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

@Component({
  selector: 'app-component',
  template: `
    <h1>{{ sharedVariable }}</h1>
    <button (click)="updateSharedVariable()">Update</button>
  `
})
export class AppComponent {
  sharedVariable: string;

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.sharedVariable = this.dataService.getSharedVariable();
  }

  updateSharedVariable() {
    this.dataService.setSharedVariable('New value');
    this.sharedVariable = this.dataService.getSharedVariable();
  }
}