-1

我有以下问题，我认为这是一个常见的情况，但我无法解决它。我有一个小的错误警报组件，里面有一个显示错误的方法。我在路由组件中使用它的方式是我使用@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>

这是我使用的 viewChild 查询NewRecordingFormComponent：

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

此查询适用于路由组件。

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

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

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

4

2 回答 2

0

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

请回复结果

于 2020-03-31T20:32:11.117 回答
-1

这篇文章给了我答案： 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 的帮助！

于 2020-04-01T07:47:47.633 回答