Angular 将一个组件作为另一个组件的 ng-template 传递 [英] Angular pass a Component as ng-template of another Component
问题描述
在我的 Angular 6 应用程序中,我需要将一个组件作为它的 ng-模板.
原因是我有一个组件A需要多次复制,但每次都必须包含不同的组件(我们称它们为组件B和组件 C),具有相同的输入.
组件 A 模板:
<h4 class="row-detail-panel-title">{{ newEntity ?'添加新':'编辑此'}} {{ entityName }}</h4><!--这是我想要注入的组件--><app-组件-b[内联]="真"[形式]="形式"></app-component-b><!--END--><!--这里还有一些 html 代码-->
我创建了一个 Component A 实例,使用:
<小时>
于是我想到了使用ng-template
,于是将Component A模板改成如下:
<h4 class="row-detail-panel-title">{{ newEntity ?'添加新':'编辑此'}} {{ entityName }}</h4><ng-template></ng-template><!--这里还有一些 html 代码-->
并使用以下方法创建组件 A 实例:
所以我可以轻松地将Component C而不是Component B注入Component A的ng-template:
问题:
我需要注入到组件B或组件C的变量form
只存在于组件A中并且不是在组件A的父级中(由于某些原因,我无法将其向上移动一级).
我该如何解决这个问题?
您是否尝试过简单地做:
<app-组件-b[内联]="真"[form]="compA.form"></app-component-b></app-component-a>//组件-a.html<div class="row-detail-panel"><h4 class="row-detail-panel-title">{{ newEntity ?'添加新':'编辑此'}} {{ entityName }}</h4><ng-content></ng-content>
为了使其工作,A 组件中定义的 form
成员应该是公共的,最好是 readonly
.
In my Angular 6 app I need to pass a Component to another Component as its ng-template.
The reason is that I have a Component A that I need to replicate many times, but each time it has to include different components (let's call them Component B and Component C) which have the same Inputs.
Component A template:
<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>
And I create a Component A instance using:
<app-component-a
[entity]="row"
[entityName]="entityName"
></app-component-a>
So I thought about using ng-template
, so changing the Component A template as follows:
<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>
And creating a Component A instance using:
<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>
So I can easily inject Component C instead of Component B as Component A's 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>
PROBLEM:
the variable form
that I need to inject to Component B or Component C exists only inside Component A and not in Component A's parent (for some reasons I cannot move it one level up).
How can I solve this problem?
Have you tried by simply doing:
<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>
In order for this to work, the form
member defined in the A component should be public, and preferably readonly
.
这篇关于Angular 将一个组件作为另一个组件的 ng-template 传递的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!