Angular: 无法读取 属性 'sendClassForm' of undefined inside of NgbModal ng-template
Angular: Cannot read property 'sendClassForm' of undefined inside ng-template of NgbModal
好吧，首先，我已经疯狂地搜索了这个问题并找到了一些解决方案（这里解释了一些），但是其中 none 解释了一种有效的解决方法。所以，我来了...
这是关于什么的
我正在创建一个使用 ng-bootstrap 的模式。我制作了一个表单组件以在其他页面中重新利用它。我把这个组件放在模态里面。我需要从父组件访问该组件的变量和方法，因此我在父组件中设置了一个 ViewChild 变量并将其设置为子组件。
当我打开模式时，组件显示没有问题。当我单击“创建”按钮时，问题就来了。当用户单击“创建”按钮时，父级（包含模态）执行子级的方法来发送表单，但父级无法访问子级的方法，因为它未定义，即使模态已经打开。
我已经尝试过的
我试过将 Child 组件放在 ng-template 之外，它工作得很好，但我需要它在模态中。
我也试过将指令上带有#id 的组件传递给父方法以执行子方法。它有效，但会使代码更脏，并在未来带来更多问题。 （这实际上是未来的我自己在这个实现中遇到了更多问题。）
如果有人想知道它带来了什么样的问题，我需要在子组件中嵌套更多组件，因为这个 'grandchild' 组件仍然在 ng-template 中，问题重复出现，现在我有让代码再次变脏...
代码（Stackblitz 应用程序）
这是我制作的 Stackblitz 应用程序。我保持它非常简单，并排除了与问题无关的不必要的代码部分。
Stackblitz App
我收到的消息错误
这是我收到的错误消息：
ERROR TypeError: Cannot read property 'sendClassForm' of undefined
我读到当 ng-template 还没有被渲染时（比如模式还没有被打开）你会得到这个 undefined 错误，但我不明白为什么它仍然发生在已经打开了。
Angular版本：8.1.2
"@ng-bootstrap/ng-bootstrap": "^5.1.0"
感谢@yurzui 坚持他的解决方案，我想出了另一个解决方案，我认为它与拥有 ViewChild 几乎相同，但没有问题。
这是 Stackblitz 代码，如果您想立即查看它，而不是我的解释。
Parent 组件
我设置了一个属性，与ViewChild相同，但删除了ViewChild部分。
classFormComponent: ClassFormComponent; // No 'ViewChild(...)' part
并且还创建了一种方法，用于在需要时将 child 组件的引用保存到上面的变量中。
// This method will be called by the ClassFormComponent when it gets ready to be used by the Parent.
saveReference( classFormComponent: ClassFormComponent ) {
this.classFormComponent = classFormComponent;
}
Parent HTML
然后，我为 app-class-form 设置了一个侦听器，因此当 child 准备就绪时，它可以通过调用 parent 的方法告诉 parent以上。
<app-class-form (componentIsReady)="saveReference( $event )"></app-class-form>
Child 组件
child 有一个输出事件发射器。
@Output() componentIsReady: EventEmitter<ClassFormComponent> = new EventEmitter();`
并且此事件在 ngOnInit 生命周期阶段发出。
ngOnInit() {
// At this point, child component is born and it's ready to be used by the parent.
this.componentIsReady.emit(this);
}
这样，parent 就可以访问 child 的方法和属性。
我说这是我所拥有的解决方案的逆向解决方案，因为现在 child 在准备就绪时到达 parent，只有到那时，parent 才会保存对它的引用.
好吧，首先，我已经疯狂地搜索了这个问题并找到了一些解决方案（这里解释了一些），但是其中 none 解释了一种有效的解决方法。所以，我来了...
这是关于什么的
我正在创建一个使用 ng-bootstrap 的模式。我制作了一个表单组件以在其他页面中重新利用它。我把这个组件放在模态里面。我需要从父组件访问该组件的变量和方法，因此我在父组件中设置了一个 ViewChild 变量并将其设置为子组件。
当我打开模式时，组件显示没有问题。当我单击“创建”按钮时，问题就来了。当用户单击“创建”按钮时，父级（包含模态）执行子级的方法来发送表单，但父级无法访问子级的方法，因为它未定义，即使模态已经打开。
我已经尝试过的
我试过将 Child 组件放在 ng-template 之外，它工作得很好，但我需要它在模态中。
我也试过将指令上带有#id 的组件传递给父方法以执行子方法。它有效，但会使代码更脏，并在未来带来更多问题。 （这实际上是未来的我自己在这个实现中遇到了更多问题。）
如果有人想知道它带来了什么样的问题，我需要在子组件中嵌套更多组件，因为这个 'grandchild' 组件仍然在 ng-template 中，问题重复出现，现在我有让代码再次变脏...
代码（Stackblitz 应用程序）
这是我制作的 Stackblitz 应用程序。我保持它非常简单，并排除了与问题无关的不必要的代码部分。 Stackblitz App
我收到的消息错误
这是我收到的错误消息：
ERROR TypeError: Cannot read property 'sendClassForm' of undefined
我读到当 ng-template 还没有被渲染时（比如模式还没有被打开）你会得到这个 undefined 错误，但我不明白为什么它仍然发生在已经打开了。
Angular版本：8.1.2
"@ng-bootstrap/ng-bootstrap": "^5.1.0"
感谢@yurzui 坚持他的解决方案，我想出了另一个解决方案，我认为它与拥有 ViewChild 几乎相同，但没有问题。
这是 Stackblitz 代码，如果您想立即查看它，而不是我的解释。
Parent 组件
我设置了一个属性，与ViewChild相同，但删除了ViewChild部分。
classFormComponent: ClassFormComponent; // No 'ViewChild(...)' part
并且还创建了一种方法，用于在需要时将 child 组件的引用保存到上面的变量中。
// This method will be called by the ClassFormComponent when it gets ready to be used by the Parent.
saveReference( classFormComponent: ClassFormComponent ) {
this.classFormComponent = classFormComponent;
}
Parent HTML
然后，我为 app-class-form 设置了一个侦听器，因此当 child 准备就绪时，它可以通过调用 parent 的方法告诉 parent以上。
<app-class-form (componentIsReady)="saveReference( $event )"></app-class-form>
Child 组件
child 有一个输出事件发射器。
@Output() componentIsReady: EventEmitter<ClassFormComponent> = new EventEmitter();`
并且此事件在 ngOnInit 生命周期阶段发出。
ngOnInit() {
// At this point, child component is born and it's ready to be used by the parent.
this.componentIsReady.emit(this);
}
这样，parent 就可以访问 child 的方法和属性。
我说这是我所拥有的解决方案的逆向解决方案，因为现在 child 在准备就绪时到达 parent，只有到那时，parent 才会保存对它的引用.