NgbModal 中的 Angular 组件无法使用 @viewchild 访问内部的方法答案

【问题标题】：Angular component in NgbModal cannot use @viewchild to access methods insideNgbModal 中的 Angular 组件无法使用 @viewchild 访问内部的方法
【发布时间】：2020-07-12 11:35:12
【问题描述】：

我有以下问题，我认为这是一个常见的情况，但我无法解决它。我有一个小的错误警报组件，里面有一个显示错误的方法。我在路由组件中使用它的方式是我使用@viewChild 查询来访问它的addNewMessage 方法并且它可以工作。

这次我有一个来自 ng-bootstrap 的 NgbModal，我用它打开了一个组件。在这个组件中，我需要使用我的错误组件来显示错误，但是我无法使错误组件在模态中正确加载，我也无法使用 viewChild 访问它的方法，我不确定问题出在 viewChild 还是组件上由于模块配置中缺少某些内容而无法加载。

这就是我在路由组件中调用我的模态（NewRecordingFormComponent）的方式：

const modalRef = this.modalService.open(NewRecordingFormComponent);

这就是我在模态中使用错误组件的方式：

<voice-error-alert-component #alertComponent></voice-error-alert-component>

这就是组件在编译后在 html 中的显示方式：

<voice-error-alert-component _ngcontent-dhb-c7=""></voice-error-alert-component>

这是我在NewRecordingFormComponent 中使用的viewChild 查询：

@ViewChild('alertComponent', { static: false }) alertComponent: ErrorAlertComponent;

此查询适用于路由组件。

我不知道如何使它工作，当我查看 html 时，我应该在其中看到一个 ng-for，但我在这里什么也没看到，这让我觉得组件没有被编译，就像 angular不知道它是一个组件，只是将其保留为纯 html。

我觉得在我的模态组件中找不到这个组件，可能是因为我使用引导模态打开它的方式？是因为我在动态组件上使用它并且因为它没有绑定到任何路由它没有被加载？我必须手动加载 y 还是手动声明它才能在模态中使用？

我还能在这里放什么以便我可以得到帮助？我对这个版本的角度很新，我正在搜索，但我找不到与我看到的相似的东西，非常感谢任何帮助！！！

【问题讨论】：

标签： angular angular-components ng-bootstrap viewchild angular-dynamic-components

【解决方案1】：

尝试在 ngAfterViewInit (console.log(alertComponent);) 中记录 viewchild 变量

请回复结果

【讨论】：

嗨！当然，我刚刚记录了它，我得到了：ElementRef {nativeElement: voice-error-alert-component}nativeElement: voice-error-alert-component 我得到了一个内部带有 html 引用的本机元素，就像一个 jquery 对象，但我看不到方法
那么你的问题是错误组件没有在模态中打开或者你可以访问组件内部的方法？
您是否尝试将组件添加到模块中的 entrycomponents 中？
问题是我无法访问模态中子组件内部的方法，我发现该组件出现在html中就好像它没有编译一样。我已经尝试将它添加到入口组件中，它现在就在那里，但似乎没有任何效果
您是否像这样导入 NgbModule ** NgbModule.forRoot()**？

【解决方案2】：

这篇文章给了我答案： https://angular-2-training-book.rangle.io/modules/feature-modules

这里真正的问题是我的组件没有被加载到我的动态组件（模态）中。

原因是我有一个应用程序的模块文件，然后是应用程序部分的小模块文件，通常由路由定义。

如果您想在另一个组件中使用一个组件，那么您需要将它添加到该组件的 .module 文件中。但是如果你想要一个带有子组件的模态（动态组件），你需要在 app.module.ts 中声明那个子组件，这样所有的组件都可以看到它。这样做的方法是为您需要在应用程序中公开的每个组件创建一个小的 .module 文件，以便像这样动态加载：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ErrorAlertComponent } from './error-alert-component.component';

@NgModule({
  imports: [CommonModule],
  declarations: [
    ErrorAlertComponent
  ],
  providers: [],
  exports: [ErrorAlertComponent]
})
export class ErrorAlertModule {}

然后将ErrorAlertModule 导入到你的应用程序的更高模块中，就这样，它就可以工作了！

请随时要求任何澄清，感谢@mohammad omar 的帮助！

【讨论】：