Angular 将一个组件作为另一个组件的 ng 模板传递

Question

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

原因是我有一个组件A，我需要多次复制，但每次它都必须包含具有相同输入的不同组件(我们称它们为组件 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>

我使用以下命令创建一个组件 A实例：

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

---

所以我考虑使用ng-template，因此更改组件 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>

所以我可以轻松地将组件 C而不是组件B作为组件 A的 ng 模板注入：

<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>

问题：

我需要注入到组件 B或组件C的变量form仅存在于组件 A 内部，而不存在于组件 A 的父组件中(由于某些原因，我无法将其向上移动一级(。

如何解决这个问题？

Answer 1

你可以做的是：

调用组件 A 时，将 ng 模板传递给该组件，如下所示：

<app-component-a> 
<ng-template *ngIf=”condition; else elseBlock”> 
<app-component-b></app-component-b> 
</ng-template> 
<ng-template #elseBlock> 
<app-component-c></app-component-c> 
</ng-template>
</app-component-a> 

现在，在您的应用程序组件中，您可以执行以下操作：

@ContentChild(TemplateRef) template: TemplateRef;

所以基本上模板将根据您的条件获得组件 b 或 c。

然后在组件 A 模板中，执行以下操作：

<ng-container [ngTemplateOutlet]="template"></ng-container>

所以现在你的ng容器将根据您的条件获得组件B或C。

就您的表单而言，恐怕我唯一能想到的就是创建一个服务并在组件 A 中提供它，将其注入 A、B 和 C 并在该服务中共享表单。

但是，如果您按照我上面显示的方式包含组件 B 和 C，Angular 将自行处理 B 和 C 组件的创建和销毁。

否则，当您的 ng 模板条件发生变化时，当组件 C 实例化时，您的组件 B 不会被销毁。

编辑：

我能想到的另一件事是，如果你没有在 A 实例化后立即调用组件 B 或 C，你也可以从 A 向 A 的父 A 发出 (@Output( 形式。这样，当调用 B 或 C 时，A 的父级将有权访问表单，并且可以将其传递给 B 或 C。

Answer 2

您是否尝试过：

<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成员应该是公共的，最好是readonly。