[英]Angular 7 - Get component instance of all components declared in HTML
I am creating a page which is like a form creator. 我正在创建一个类似于表单创建者的页面。 The user will click and add different components into the page, which will add entries into the "component" variable as so: 用户将单击并将不同的组件添加到页面中,从而将条目添加到“ component”变量中,如下所示:
Example for Component1: Component1的示例:
const childComponent = this.componentFactoryResolver.resolveComponentFactory(Component1);
this.components.push(childComponent);
So the components array will have a collection of ComponentFactory elements. 因此,components数组将具有ComponentFactory元素的集合。
I am then creating components dynamically and conditionally in HTML as follows: 然后,我将在HTML中动态和有条件地创建组件,如下所示:
<div cdkDropList class="example-list" style="margin: 20px" (cdkDropListDropped)="drop($event)">
<div cdkDrag *ngFor="let cmp of components">
<ng-container *ngIf="cmp.componentType.name=='Component1'">
<app-Component1></app-Component1>
</ng-container>
<ng-container *ngIf="cmp.componentType.name=='Component2'">
<app-Component2></app-Component2>
</ng-container>
<ng-container *ngIf="cmp.componentType.name=='Component3'">
<app-Component3></app-Component3>
</ng-container>
</div>
</div>
Works fine so far. 到目前为止工作正常。 Now, when the user clicks the save button, it should get a list of all the components on the page. 现在,当用户单击“保存”按钮时,它将获得页面上所有组件的列表。 I need it in the end as the components are editable, so the values will change. 最后,我需要它,因为组件是可编辑的,因此值将更改。 the list "components" cannot be used as it only contains the Factory elements. 该列表“ components”仅包含Factory元素,因此无法使用。
Is it possible to get the component instance that gets declared in HTML? 是否有可能获得以HTML声明的组件实例? I am trying @ViewChildren, but I might need to add it for every component type, so I wont get it in the order it was added by the user. 我正在尝试@ViewChildren,但可能需要为每种组件类型添加它,因此我不会按照用户添加它的顺序来获取它。
Finally, I have tried to create the component in code and then add it to the page using ComponetFactoryResolver. 最后,我尝试用代码创建组件,然后使用ComponetFactoryResolver将其添加到页面中。 However, each of them needs to have the directive "cdkDrag" declared within it, which becomes impossible using that approach. 但是,它们每个都需要在其中声明指令“ cdkDrag”,使用该方法将变得不可能。
Thanks. 谢谢。
When using a loop, the template reference variables can refer to several items. 使用循环时,模板引用变量可以引用多个项目。
This is shown in this stackblitz and as you can see, both elements have the correct class instance. 这显示在此堆叠闪电中 ,如您所见,这两个元素都具有正确的类实例。
Hope this helps ! 希望这可以帮助 !
<ng-container *ngFor="let i of [0, 1]; last as isLast; first as isFirst">
<hello *ngIf="isFirst" #child name="{{ name }}"></hello>
<goodbye *ngIf="isLast" #child name="{{ name }}"></goodbye>
</ng-container>
<p>
Start editing to see some magic happen :)
</p>
import { Component, ViewChildren, QueryList } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
@ViewChildren('child') children: QueryList<any>;
ngOnInit() {
setTimeout(() => console.log(this.children.first), 1000);
setTimeout(() => console.log(this.children.last), 1000);
}
}
HelloComponent
name: "Angular"
__proto__: Object
GoodbyeComponent
name: "Angular"
__proto__: Object
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.