Question

我在使用resolveComponentFactory创建新组件时遇到问题。首先有一个startComponent（父组件），从这个组件中有几个按钮，每个btn创建一个新的子组件。例如，现在我创建一个＆＃34; childComponent＆＃34;这也有效。但现在我想在childComponent中创建一个新的childComponent，这个新组件应该将startComponent作为父组件，而不是childComponent本身。因此，我需要一种方法来使用addComponent()来startComponent调用childComponent方法。

这就是我现在这样做的方式：

startComponent.ts：

import {
Component, OnInit, ViewChild,
ComponentFactoryResolver,
ViewContainerRef
} from '@angular/core';

Import { childComponent } from '../childComponent/child.component';
import { DataService } from '../data.service';

@Component({
selector: 'app-start',
templateUrl: './start.component.html',
styleUrls: ['./start.component.css']
})


export class startComponent implements OnInit {
@ViewChild('parent', { read: ViewContainerRef }) container: ViewContainerRef;

constructor(private dataService: DataService, private componentFactoryResolver: ComponentFactoryResolver){}

ngOnInit(){}

addComponent(){

let componentFactory = this.componentFactoryResolver.resolveComponentFactory(childComponent);

let component = this.container.createComponent(componentFactory);
// next Line i save the reference of the "childComponent" to a Service
// so the "childComponent" can get it and destroy himself if wanted
this.createComponentService.setReference(component, type);
}
}

startComponent.html

<div>
<span matTooltip="Select"><button (click)="addComponent()" class="btn">
<img class="img" src="./assets/StartIcons/childCreate-icon.png" alt="not found"> </button></span>
</div>

<div #parent></div>

如果我想使用childComponent创建childComponent，但确实有效，但startComponent不是父组件。我希望你理解我的问题，否则我可以尝试再解释一下。

Answer 1

但是现在我想在其中创建一个新的childComponent childComponent和这个新组件的startComponent应为父组件，而不是childComponent本身。所以我需要一个方法使用my调用startComponent中的addComponent（）方法 childComponent。

因此，在childComponent中，您应该参考parentComponent(StartComponent)。您可以通过注入新添加的childComponent来获取它：

<强> childComponent ：

constructor(private parentComp: StartComponent){

}

正如您所引用的那样，您可以访问属性，parent的方法以及childComponent内的addComponent()可以轻松调用parentComp.addComponent();：

injector

更新

有趣的，动态创建的组件在StartComponent中没有父组件。因此，它无法注入父StartComponet。

另一种解决方案

使用ngOnInit() { this.comps.clear(); let aComponentFactory = this.componentFactoryResolver.resolveComponentFactory(this.compArr[0]); let aComponentRef = this.comps.createComponent(aComponentFactory); (<AComponent>aComponentRef.instance).name = 'A name'; (<AComponent>aComponentRef.instance).parent = this; }设置子组件的父属性：
```
inject
```
StackBlitz Demo。查看控制台
在子级中手动constructor(public injector: Injector ) { console.log('child injector', injector); this.parent = injector.get(AppComponent); } ngOnInit() { console.log('parent is here', this.parent); this.parent.test(); }父组件：
```
{{1}}
```
StackBlitz Demo。查看控制台

在子组件中创建新的子组件

1 个答案:

更新

另一种解决方案