Angular多个组件通过不工作的服务共享数据

在Angular中，多个组件之间共享数据可以通过服务来实现。服务是一个可注入的类，用于在组件之间共享数据、逻辑和功能。

首先，创建一个服务来共享数据。可以使用Angular的CLI命令ng generate service data来生成一个名为data的服务。然后，在该服务中定义一个属性来存储要共享的数据，例如：

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  sharedData: any;

  constructor() { }
}

接下来，在要共享数据的组件中，将该服务注入进来，并使用该服务的属性来存储和获取数据。例如，在组件A中：

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

@Component({
  selector: 'app-component-a',
  template: `
    <div>
      <input [(ngModel)]="sharedData" (ngModelChange)="updateData()" placeholder="输入数据">
    </div>
  `
})
export class ComponentA {
  sharedData: any;

  constructor(private dataService: DataService) {
    this.sharedData = this.dataService.sharedData;
  }

  updateData() {
    this.dataService.sharedData = this.sharedData;
  }
}

在组件B中也是类似的方式注入服务，并使用服务的属性来获取和更新数据。例如：

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

@Component({
  selector: 'app-component-b',
  template: `
    <div>
      <p>共享的数据：{{ sharedData }}</p>
    </div>
  `
})
export class ComponentB {
  sharedData: any;

  constructor(private dataService: DataService) {
    this.sharedData = this.dataService.sharedData;
  }
}

现在，组件A和组件B就可以通过共享的服务来共享数据了。当组件A中的数据发生变化时，组件B中的数据也会相应更新。

关于Angular的更多知识和概念，可以参考腾讯云的相关文档和教程：