Angular：如何与 app-component (app-root) 共享来自 custom-component 的数据

Question

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：在路由中定义 -> router.module.ts 除了许多其他 custom-components 它还有一个 table 显示由发送 get-requests 到 API。像这样：

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

中

Answer 1

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

您可以使用属性 tittle = new subject() 创建一个名为 AppCommunication 的服务，该服务可以具有在应用程序组件上订阅的可观察对象，并且可以注入到您的自定义组件中，这样您就可以触发来自 'next'.

的值

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

Answer 2

您不能使用 RXJS 发送此数据，behaviorSubject？

在某些服务上：

varbSubject$ = new BehaviorSubject(<string>);

在您的应用组件上：

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

关于自定义未知元素 =>

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

Answer 3

看看下面的@ThiagoNascimento post，它解决了我的问题！
Link:

Angular：如何与 app-component (app-root) 共享来自 custom-component 的数据

Angular: how to share data from custom-component with app-component (app-root)

components

typescript

angular