I have a BadgeComponent with this template:

<draw-circle
  [position.x]="position.x"
  [position.y]="position.y"
  [resolution]="20"
  [radius]="2"
  [color]="color"
> 
  <ng-content />
</draw-circle>

The ng-content is meant to project some decorations, that optionally can enhance the visual appearance of the circle in the template. So this component will be used somehow like that:

<draw-badge icon="Support" color="red">
  <!-- this outline should decorate the circle in the template above -->
  <draw-outline color="black" [width]="2" />
</draw-badge>

The way outlines usually find there parent's shape is via the dependency injection. the <draw-circle> component provides itself as a Shape token, which the <draw-outline> is able to find and communicate with.

But unfortunately in my situation with the ng-content, the Shape token is not found, as it uses the "outer hierarchy" (second code snippet) in order to try to resolve the tokens, instead of the "inner one" (first code snippet).

Does anybody have an idea how I could solve the problem? I thought about some ways, but didn't make it to get working:

  1. create a custom my-content component, that uses @ContentChildren() to find all content and then project it via <ng-container [ngTemplateRefOutlet] />
  2. make the badge-component (which template we see in the first code snippet) provide itself for the necessary roles and somehow relay communication to the inner circle (seemed to be way too much overhead)
  3. try to use services to communicate, and be able to "override" a service instance with another. So basically the "circle" has its default service, as long as there is not another service-token provided, that – if existing – will be used instead. This way, the circle will work standalone, but the badge component can provide its service for the circle AND the ng-content, so that they both get connected somehow (don't know if that is good practice and will even work)

If you have any idea how to sanely solve that problem, I'd appreciate your help! :)

0

There are 0 answers