使用服务不工作的两个组件angular 6/7之间的交互

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

@Injectable()
export class SharedService {
  private dataSubject = new BehaviorSubject<string>(''); // 定义一个BehaviorSubject来存储共享数据
  public data$ = this.dataSubject.asObservable(); // 将BehaviorSubject转换为Observable供组件订阅

  setData(data: string) {
    this.dataSubject.next(data); // 修改共享数据
  }
}

import { Component, OnInit } from '@angular/core';
import { SharedService } from 'path/to/shared.service';

@Component({
  selector: 'app-component1',
  template: `
    <h1>Component 1</h1>
    <input [(ngModel)]="data" (ngModelChange)="updateData()" placeholder="Enter data">
  `
})
export class Component1 implements OnInit {
  data: string;

  constructor(private sharedService: SharedService) {}

  ngOnInit() {
    this.sharedService.data$.subscribe(data => {
      this.data = data; // 订阅共享数据的变化
    });
  }

  updateData() {
    this.sharedService.setData(this.data); // 修改共享数据
  }
}

import { Component, OnInit } from '@angular/core';
import { SharedService } from 'path/to/shared.service';

@Component({
  selector: 'app-component2',
  template: `
    <h1>Component 2</h1>
    <p>Data from Component 1: {{ data }}</p>
  `
})
export class Component2 implements OnInit {
  data: string;

  constructor(private sharedService: SharedService) {}

  ngOnInit() {
    this.sharedService.data$.subscribe(data => {
      this.data = data; // 订阅共享数据的变化
    });
  }
}