javascript - Angular - 动态注入内容到零件

Question

我有组件的组成

组分A <div class="CA"><ng-content></ng-content></div>

组分B <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-bfrom的孩子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将 HTML 注入InputComponent孩子。

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

是否可以访问ng-contentAngular 中的许多嵌套级别？此外，这样的解决方案是否有更好的架构模式？

标签： javascriptangular