Angular-将内容动态注入到<ng-content>组件

Question

我有组成部分

ComponentA <div class="CA"><ng-content></ng-content></div>

ComponentB <div class="CB"><ng-content></ng-content></div>

在父级中，我想这样使用它们：

<component-a>
    <component-b>
        // I want something here
        <div>some-content injected from parent<div/>
    </component-b>
</component-a>

因此，我的组件被设计为可组合的，并且父组件需要访问其范围内的所有组件-无需使用api。

我想做的也是影响component-b中component-a的子级。我想从I want something here访问ComponentA.component.ts并在其中注入一些东西。

现实生活中的例子：

<app-input-with-buttons (onButtonClick)="someCallback()">
    <app-input [validationMessage]="someValidation$ | async">
        <input ngModel />
    </app-input>
</app-input-with-buttons>

我需要InputWithButtonsComponent才能向InputComponent个孩子注入HTML。

我知道它“太过反应了”，但是这种方法允许我将组件限制为单一职责，允许表单组件控制表单控制的每个步骤。

是否可以在Angular中访问ng-content的许多嵌套级别？另外，对于这种解决方案，是否有更好的架构模式？