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

Question

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

例如：

<router-outlet> </router-outlet>
<filter-mobile></filter-mobile>

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

如需更多说明，请留言

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

"best"方式是使用服务。您可以使用服务在不同组件之间进行通信。

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

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

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

Answer 4

您可以使用服务在不同组件之间共享数据 store/pass 周围的数据。

基本上，您应该：

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

I created an oversimplified example here (stackblitz)

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

How to transfer data between component Angular?

angular

angular5

angular7