AEM 6.5, SPA, Angular 9 - How do I subscribe to a parent container component from a child component? | Adobe Higher Education
Skip to main content
D
dpkhmhs
Level 2
February 29, 2024
解決済み

AEM 6.5, SPA, Angular 9 - How do I subscribe to a parent container component from a child component?

  • February 29, 2024
  • 1 の返信
  • 598 ビュー

AEM 6.5, SPA, Angular 9

In the editor and published page via Typescript, I'd like to subscribe to a parent container component from a child component.  If I drag a parent container component on the editor page and then drag a child component so it is inside of the parent container, how can the child get a reference to it's closest parent so it can subscribe to parent changes?

When a component is dragged onto the editor page, are there certain Angular-monitored events that are triggered and would help with a solution?

Two use cases I'm trying to solve:

  1. The parent container has a background color property that is also the background color of any child component.  The child component needs to know what its closest parent's background color is so it can use the appropriate text color.
  2. To dynamically build a backend data structure, the child needs to know the ID of its closest parent component.

 

このトピックへの返信は締め切られました。
ベストアンサー EstebanBustamante

Hi, 

 

You don't necessarily need any specific Angular or AEM functionality to achieve this. You could simply utilize the "closest" selector to locate the parent container. Once you've obtained the parent, you can retrieve the details and perform updates to your children.

You would implement something along these lines:

<div class="container"> <div class="component1"> </div> <div class="component2"> </div> </div> //Using JS document.querySelector(".component2").closest(".container")


Please check these links:

https://stackoverflow.com/questions/22119673/find-the-closest-ancestor-element-that-has-a-specific-class

https://developer.mozilla.org/en-US/docs/Web/API/Element/closest 

 

Hope this helps

1 の返信

EstebanBustamante
Community Advisor and Adobe Champion
EstebanBustamanteCommunity Advisor and Adobe Champion回答
Community Advisor and Adobe Champion
March 14, 2024

Hi, 

 

You don't necessarily need any specific Angular or AEM functionality to achieve this. You could simply utilize the "closest" selector to locate the parent container. Once you've obtained the parent, you can retrieve the details and perform updates to your children.

You would implement something along these lines:

<div class="container"> <div class="component1"> </div> <div class="component2"> </div> </div> //Using JS document.querySelector(".component2").closest(".container")


Please check these links:

https://stackoverflow.com/questions/22119673/find-the-closest-ancestor-element-that-has-a-specific-class

https://developer.mozilla.org/en-US/docs/Web/API/Element/closest 

 

Hope this helps

Esteban Bustamante
契約条件Accessibility statement

Loading footer...