链接到更新的问题 https://stackoverflow.com/questions/73987046/angular-dynamically-adding-removing-multiple-instances-of-a-single-component.
我已经发布这个问题 https://stackoverflow.com/questions/73830955/angular-a-function-defined-in-one-component-that-generates-dynamic-child-comp前。简要总结一下；我正在尝试调用一个使用以下命令创建组件实例的函数组件工厂解析器 and 视图容器引用在非相关组件中的另一个函数内部。具体可参考上一个问题 https://stackoverflow.com/questions/73830955/angular-a-function-defined-in-one-component-that-generates-dynamic-child-comp.
然而，从那时起我已经取得了一些进展并查明了问题所在。我已经改变了添加状态框组件ts 文件（我试图从中调用其他组件函数的组件）：
import { Component} from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { MatDialogRef } from '@angular/material/dialog';
import { LiveSummaryComponent } from 'src/app/pages/live-summary/live-summary.component';
@Component({
selector: 'app-add-status-box',
templateUrl: './add-status-box.component.html',
styleUrls: ['./add-status-box.component.css']
})
export class AddStatusBoxComponent
{
public parentRef!: LiveSummaryComponent;
constructor(private form: FormBuilder, private dialogRef: MatDialogRef<AddStatusBoxComponent>) {}
addStatusBox()
{
this.parentRef.createComponent();
this.dialogRef.close();
}
}
to this:
import { Component} from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { MatDialogRef } from '@angular/material/dialog';
import { LiveSummaryComponent } from 'src/app/pages/live-summary/live-summary.component';
@Component({
selector: 'app-add-status-box',
templateUrl: './add-status-box.component.html',
styleUrls: ['./add-status-box.component.css']
})
export class AddStatusBoxComponent
{
//public parentRef!: LiveSummaryComponent;
constructor(public parentRef: LiveSummaryComponent, private form: FormBuilder, private dialogRef: MatDialogRef<AddStatusBoxComponent>) {}
addStatusBox()
{
this.parentRef.createComponent();
this.dialogRef.close();
}
}
我注射的地方实时摘要组件到构造函数中并将其添加到提供者中app.module.ts反而。这样我就可以调用LiveSummaryComponent createComponent()函数，它之所以有效，是因为我通过注释掉该函数中的所有内容并放置一个简单的代码来测试它console.log()以确认其有效。
但是，当我取消注释正常内容时createComponent() 函数并从添加状态框组件现在它在浏览器控制台中给了我一条不同的错误消息：
ERROR TypeError: Cannot read properties of undefined (reading 'createComponent')
at LiveSummaryComponent.createComponent (live-summary.component.ts:52:38)
at AddStatusBoxComponent.addStatusBox (add-status-box.component.ts:129:20)
at AddStatusBoxComponent_Template_form_ngSubmit_3_listener (add-status-box.component.html:4:54)
at executeListenerWithErrorHandling (core.js:15285:1)
at Object.wrapListenerIn_markDirtyAndPreventDefault [as next] (core.js:15323:1)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:183:1)
at SafeSubscriber.next (Subscriber.js:122:1)
at Subscriber._next (Subscriber.js:72:1)
at Subscriber.next (Subscriber.js:49:1)
at EventEmitter_.next (Subject.js:39:1)
这表明它是第 52 行实时摘要组件这条线位于createComponent()功能：
let childComponentRef = this.VCR.createComponent(componentFactory);
这个.VCR 是一个视图容器引用
定义为：
@ViewChild("viewContainerRef", { read: ViewContainerRef })
public VCR!: ViewContainerRef;
我不得不使用!否则我会收到此错误：
Property 'VCR' has no initializer and is not definitely assigned in the constructor.
The @ViewChild我认为源于此实时摘要组件模板文件：
<button type="button" (click)="createComponent()">
I am Parent, Click to create Child
</button>
<ng-template #viewContainerRef></ng-template>
我知道这可能会令人困惑LiveSummaryComponent createComponent()函数与函数同名this.VCR.createComponent(componentFactory);但它们是不同的功能。
所以我认为问题出在这里，但我不知道如何解决它，以便我能够执行LiveSummaryComponent createComponent()里面的函数AddStatusBoxComponent addStatusBox()单击按钮即可使用该功能。
完整的代码可以在上一个问题 https://stackoverflow.com/questions/73830955/angular-a-function-defined-in-one-component-that-generates-dynamic-child-comp，这次唯一的区别是我对如何实时摘要组件中引用了添加状态框组件通过构造函数中的依赖注入。
我对 Angular 还很陌生，所以很多内容我都不太理解。
我想要实现的目标摘要：
我想要实现的是创建子组件的实例（状态框组件）在父级（实时摘要组件）但是函数createComponent()创建实例状态框组件位于实时摘要组件从完全不同的组件调用（添加状态框组件），当按下按钮时，会弹出一个模式对话框标头组件但我无法访问实时摘要组件 createComponent()函数从添加状态框组件由于我在问题中突出显示的错误
