Angular：如何与应用程序组件（应用程序根）共享来自自定义组件的数据

Posted 2023-02-23

【中文标题】Angular：如何与应用程序组件（应用程序根）共享来自自定义组件的数据

【英文标题】：Angular: how to share data from custom-component with app-component (app-root)

【发布时间】：2021-12-29 15:01:12

【问题描述】：

App-Component-html:（在 Index.Html 中为<app-root></app-root>）

<h2> currentOrNextWeek week from dateMonday to dateFriday </h2>
<div class="container"> <router-outlet></router-outlet> </div>

Custom-Component-TS：在 routes -> router.module.ts 中定义，除了许多其他自定义组件之外，它还有一个表格，显示由向 API 发送 get-requests 的服务的数据实现的信息。像这样：

this.configService.getData.subscribe(data => organizeData(data))

数据本身包含“Week = Current”、“DateOfMonday=01.01.2021”等信息（一切都是字符串）

如何将数据从 custom.component 传递到 app.component？我尝试了 EventEmitter，但我使用了<router-outlet>。正如我正确理解的那样，序列以 app-component 开头，但第一个 GetData 调用在 custom-component 中，但标题在 app-component-html 中

【问题讨论】：

这篇文章对你有帮助angular.io/guide/inputs-outputs

@DmitryGrinko 谢谢！我已经看过了。得到的答案是 EventEmitter with Input,Output 不适用于

【参考方案1】：

您的问题似乎是如何在两个动态且不需要是父子的组件之间交换属性。 在这种情况下，通过 Service 进行通信似乎是最好的方法。

您可以创建一个名为AppCommunication 的服务，其属性为tittle = new subject()，该服务可以具有在应用组件上订阅的可观察对象，并且可以注入到您的自定义组件中，以便您可以从“下一个”触发值。

这可以在任何你想设置它的地方使用。

【讨论】：

嘿！是的，我有同样的想法，但在页面的第一次加载时，标题是“从一周到”。也许我遗漏了一些东西，因为我认为该属性是在应用组件中首先调用的，但它是在自定义组件完成后首先设置的。

是的，因为只有在自定义组件的api完成并触发事件更新它时才会设置标题。

【参考方案2】：

您不能使用 RXJS、behaviourSubject 发送这些数据吗？

在某些服务上：

varbSubject$ = new BehaviorSubject(<string>); 

在您的应用组件上：

bSubject$ = yourservice.varbSubject$
bSubject$.next("b");

关于自定义未知元素 =>

bSubject$ = yourservice.varbSubject$
bSubject$.subscribe(value => 
  console.log("Subscription got", value); 
); 

【讨论】：

反之亦然？可能吗？因为 App-Component 是第一个要加载的组件，第一个请求是在 custom-component 中完成的，我需要这个请求中的信息用于我的 App-Component

谢谢！你的回答解决了我的问题！不幸的是，我还不能给你一个赞成票，但我会在之后给你一个:)

【参考方案3】：

看看下面的@ThiagoNascimento 帖子，它解决了我的问题！ 链接：https://***.com/a/70028739/17449921