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

Question

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

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

这是我的结构：

componentA在componentC的html中被调用，如下所示：

<app-componentA</app-componentA>

componentB通过modalController调用

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

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

并接收到componentC：

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

现在我如何将数据从componentB传递到ComponentA？

Answer 1

虽然通常取决于您的应用程序，但是在Angular应用程序内部移动数据的最佳方法是通过服务。您将服务插入需要共享数据的所有组件中。这是一个简单的例子。

在FirstComponent中：

isLoggedIn: boolean;

constructor(private myService: MyService) {}

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

在SecondComponent中：

constructor(private myService: MyService) {}

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

在MyService中：

private isLoggedIn = false;

getLoggedInStatus() {
  return this.isLoggedIn;
}

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

在此示例中，事件和数据在服务中进行集中存储和修改，并且每个组件都可以获取所需的内容。有关Angular服务的更多信息，请在此处查看文档：{​​{3}}