Question

当多个嵌套组件之间如何在Angular组件之间传输数据？

例如：

我需要将结果数据从组件<router-outlet> </router-outlet> <filter-mobile></filter-mobile>传递到filter-mobile内部的任何组件，它也可以是嵌套组件。

如果您需要更多说明，请发表评论

Answer 1

对此的最佳实践是使该组件结合在一起（在HTML中）这两个部分，充当Smart Component并管理两者之间的数据流。您还可以在此级别上provide和service，底层组件也可以（可选地）注入并通过它进行通信。您将不得不考虑将通过那里的数据，但这是实现它的另一种方式。

特别是当filter-mobile component是您感兴趣的事件的来源时，您可以拥有一个与该组件更紧密连接的服务，该组件将事件发送给该组件。然后，取决于路由器的组件将（可选）必须侦听此服务并对其消息采取行动。

https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

Answer 2

“最佳”方式是使用服务。您可以使用服务在不同组件之间进行通信。

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

@Injectable()
export class ShareableServiceService {

/**
* Choose your dataType
*/
public shareableData: BehaviorSubject<any> = new BehaviorSubject()

constructor() { 


}


  public updateData(newContent: any): void  {
    this.shareableData.next(newContent);
  }

}
//COMPONENT 
import { Component } from '@angular/core';

@Component({
 selector: 'my-app',
 templateUrl: './app.component.html',
 styleUrls: [ './app.component.css' ]
})
  export class AppComponent  {
  name = 'Angular';

  constructor(private  service: ShareableServiceService) {

  this.service.shareableData.subscribe(data => {

    //DO SOMETHING TO YOUR DATA HERE
  });

  }

Answer 3

您应该将所有这些数据设置为服务类。

1-创建一个behaviorSubject属性并共享所有组件

Answer 4

您可以使用服务存储/传递数据，从而在不同组件之间共享数据。

基本上，您应该：

创建服务
添加一些公共属性来保存数据
将服务注入组件
更新这些组件以使用该服务存储数据。

I created an oversimplified example here (stackblitz)

如何在组件Angular之间传输数据？

4 个答案: