在angular 7中如何在一个组件中进行更改时更新另一个组件中的数据

在Angular 7中，可以使用服务（Service）来实现在一个组件中进行更改时更新另一个组件中的数据。以下是一种常见的实现方式：

创建一个共享数据的服务，可以命名为DataSharingService。

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

@Injectable({
  providedIn: 'root'
})
export class DataSharingService {
  private dataSubject = new BehaviorSubject<string>(''); // 初始化一个BehaviorSubject，用于存储共享数据
  public data$ = this.dataSubject.asObservable(); // 创建一个Observable，用于订阅共享数据的变化

  constructor() { }

  updateData(newData: string) {
    this.dataSubject.next(newData); // 更新共享数据
  }
}

在需要共享数据的组件中，注入DataSharingService，并订阅data$ Observable来获取共享数据。

import { Component, OnInit } from '@angular/core';
import { DataSharingService } from '路径/DataSharingService';

@Component({
  selector: 'app-component1',
  template: `
    <div>
      <input [(ngModel)]="sharedData" (ngModelChange)="updateSharedData()" placeholder="输入共享数据">
    </div>
  `,
})
export class Component1 implements OnInit {
  sharedData: string;

  constructor(private dataSharingService: DataSharingService) { }

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

  updateSharedData() {
    this.dataSharingService.updateData(this.sharedData); // 更新共享数据
  }
}

在需要更新共享数据的组件中，同样注入DataSharingService，并调用updateData方法来更新共享数据。

import { Component, OnInit } from '@angular/core';
import { DataSharingService } from '路径/DataSharingService';

@Component({
  selector: 'app-component2',
  template: `
    <div>
      <button (click)="updateSharedData()">更新共享数据</button>
    </div>
  `,
})
export class Component2 implements OnInit {

  constructor(private dataSharingService: DataSharingService) { }

  ngOnInit() {
  }

  updateSharedData() {
    const newData = '新的共享数据';
    this.dataSharingService.updateData(newData); // 更新共享数据
  }
}

通过以上步骤，当在Component1中输入数据并更新时，Component2中的共享数据也会相应地更新。这是因为它们都订阅了DataSharingService中共享数据的变化。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云数据库（TencentDB）。