如何将数据传递给组件到另一个组件[重复]答案

【问题标题】：How to pass data to component to another component [duplicate]如何将数据传递给组件到另一个组件[重复]
【发布时间】：2019-12-22 23:50:21
【问题描述】：

我需要帮助，在最后几天我试图在组件之间传递数据......我在互联网上跟踪了很多示例，但这些都不起作用。

大多数教程告诉我使用@input 和@output。我认为这是以角度传递数据的最正确方法...

这是我的结构：

componentA在componentC的html中被调用，像这样：

<app-componentA</app-componentA>

componentB通过modalController调用

在我的实际代码中，我将 componentB 中生成的数据传递给 componentC，如下所示：

// componentB.ts
  dimiss(filters?: any) {
    this.modalController.dismiss(filters);
  }

并在组件C中接收：

// componentC.ts
const filters = await modal.onDidDismiss();
this.Myfilters = filters ;

现在我如何将数据从组件B 传递到组件A？

【问题讨论】：

使用共享服务。
输入看起来不错。使用时具体问题是什么？发布一个完整的最小示例来重现问题，并解释问题是什么。如果不张贴您尝试过的内容并解释“无效”的含义，就说您尝试过的所有方法都不起作用，我们就无法为您提供帮助。
使用Input和Output传递数据，当然是组件间传递数据的正确方式。如果您想使用一些共享服务和 rxjs 传递它，请记住在您销毁组件时取消订阅。

标签： angular typescript input output ionic4

【解决方案1】：

虽然这取决于您的应用，但一般来说，在 Angular 应用中移动数据的最佳方式是通过服务。您将服务注入到需要共享数据的所有组件中。这是一个简单的例子。

在第一个组件中：

isLoggedIn: boolean;

constructor(private myService: MyService) {}

ngOnInit() {
  this.isLoggedIn = this.myService.getLoggedInStatus();
}

在第二组件中：

constructor(private myService: MyService) {}

onLogin(loginData) {
  this.myService.login(loginData);
}

在我的服务中：

private isLoggedIn = false;

getLoggedInStatus() {
  return this.isLoggedIn;
}

login(loginData) {
  if (loginData === valid) {
    this.isLoggedIn = true;
  }
}

在此示例中，事件和数据在服务中集中存储和修改，每个组件获取它需要的内容。有关 Angular 服务的更多信息，请查看此处的文档：https://angular.io/guide/dependency-injection

【讨论】：

在这种情况下，您显示的组件不会被通知数据已更改。
我会试试的！谢谢
@Stefan 你说得对，我没想到 ^^ 现在太习惯使用 Observables 了！