Angular 将一个组件作为另一个组件的 ng-template 传递

Question

在我的 Angular 6 应用程序中，我需要将一个组件作为其 ng-template 传递给另一个组件.

原因是我有一个 Component A 需要复制很多次，但每次它都必须包含不同的组件(我们称它们为 Component B 和组件 C)具有相同的输入。

组件 A 模板:

<div class="row-detail-panel">
  <h4 class="row-detail-panel-title">{{ newEntity ? 'Add new' : 'Edit this'}} {{ entityName }}</h4>

  <!--THIS IS THE COMPONENT I WANT TO INJECT-->
  <app-component-b
    [inline]="true"
    [form]="form"
  ></app-component-b>
  <!--END-->

  <!--some more html code here-->
</div>

然后我创建了一个Component A 实例，使用:

<app-component-a
  [entity]="row"
  [entityName]="entityName"
></app-component-a>

---

于是想到了使用ng-template，于是将Component A模板改成如下:

<div class="row-detail-panel">
  <h4 class="row-detail-panel-title">{{ newEntity ? 'Add new' : 'Edit this'}} {{ entityName }}</h4>

  <ng-template></ng-template>

  <!--some more html code here-->
</div>

并使用以下方法创建一个组件A实例:

<app-component-a
  [entity]="row"
  [entityName]="entityName"
>
  <app-component-b
    [inline]="true"
    [form]="form" <!--PROBLEM: "form" does not exist here-->
  ></app-component-b>
</app-component-a>

所以我可以很容易地注入(inject) Component C 而不是 Component B 作为 Component A 的 ng-template:

<app-component-a
  [entity]="row"
  [entityName]="entityName"
>
  <app-component-c
    [inline]="true"
    [form]="form" <!--PROBLEM: "form" does not exist here-->
  ></app-component-c>
</app-component-a>

问题:

我需要注入(inject)到Component B 或Component C 的变量form 只存在于Component A 中并且不在组件A的父级中(由于某些原因我不能将它向上移动一个级别)。

我该如何解决这个问题？

Answer 1

你有没有尝试过简单地做:

<app-component-a #compA
  [entity]="row"
  [entityName]="entityName">
  <app-component-b
    [inline]="true"
    [form]="compA.form"
  ></app-component-b>
</app-component-a>

// component-a.html

<div class="row-detail-panel">
  <h4 class="row-detail-panel-title">{{ newEntity ? 'Add new' : 'Edit this'}} {{ entityName }}</h4>
  <ng-content></ng-content>
</div>

为了使其工作，A 组件中定义的 form 成员应该是公共(public)的，最好是 readonly。