如何将数据从一个组件传递到另一个组件

Question

如何在一个组件向另一个组件传递数据

链接

我需要一些建议和示例代码，想了解如何在多个组件之间传递数据。在Angular中是否存在其他方法？

当组件间不存在父子关系（即非父子组件间）时，如何通过服务或其他方式传递值？

Code Different · Answer

答案：

使用Angular服务：

在没有父子关系的Angular组件之间有效传递数据的一种方法是利用共享服务。以下是分步指南：

创建共享服务：

使用Angular CLI生成服务：

     ng generate service data-sharing

在服务中定义数据：

在生成的服务（data-sharing.service.ts）中，定义一个变量来保存共享数据。

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

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

注入服务：

在需要共享数据的两个组件中注入服务。

     import { Component, OnInit } from '@angular/core';
     import { DataSharingService } from '../data-sharing.service';

     @Component({
       selector: 'app-component1',
       templateUrl: './component1.component.html',
       styleUrls: ['./component1.component.css'],
     })
     export class Component1Component implements OnInit {
       constructor(private dataSharingService: DataSharingService) {}

       // 示例：在Component 1中设置数据
       sendData() {
         this.dataSharingService.sharedData = 'Hello from Component 1';
       }
     }

     import { Component, OnInit } from '@angular/core';
     import { DataSharingService } from '../data-sharing.service';

     @Component({
       selector: 'app-component2',
       templateUrl: './component2.component.html',
       styleUrls: ['./component2.component.css'],
     })
     export class Component2Component implements OnInit {
       receivedData: any;

       constructor(private dataSharingService: DataSharingService) {}

       // 示例：在Component 2中获取数据
       ngOnInit() {
         this.receivedData = this.dataSharingService.sharedData;
       }
     }

动态更新UI：
- 随着服务中数据的变化，两个组件的UI都会动态更新。

替代方法：

虽然服务是一种常见且推荐的方式，但还有其他方法可以在组件之间实现数据共享：

事件发射器（Event Emitters）：组件可以发射事件，其他组件可以订阅这些事件。
BehaviorSubject或Observables：在服务中创建一个可观察对象，并在多个组件中订阅它。

记住要根据您的用例和应用程序架构选择最适合的方法。

如果您有任何进一步的问题或需要澄清，请随时提问！

davidkonrad · Answer

如果您使用的是Angular 17，您可以在服务中使用信号（signals）。

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

@Injectable({
  providedIn: 'root',
})
export class SampleService {
  count = signal(0);
}

在组件一中，您可以更改这个计数值；而在组件二中，您可以监听这个变化。

组件一：

constructor(private sampleService: SampleService) {}

this.sampleService.count.set(2);

组件二：

import { Component, effect } from '@angular/core';
// ...
constructor(private sampleService: SampleService) {
  effect(() => console.log(this.sampleService.count()))
}

每当您在组件一或其他任何地方更改计数值时，组件二都会接收到通知。

Dustin · Answer

正如jabez所提到的，服务可能是您想要采取的途径。您也可以考虑使用像ngrx这样的状态管理库来管理整个应用的状态。这种方法更高级，需要更多的样板代码，且有一段学习曲线，但将应用状态集中化有许多优点，如保持数据同步和共享数据。