angular - 如何通过 CDK 覆盖包含包含其他非 HTML 元素（如 mat-icon）的 Angular 组件

Question

我正在尝试通过使用可以应用于任何输入/文本区域字段的指令 [appSpeechToText] 在我的应用程序中实现 Speech To Text 功能，该组件基本上显示了我希望使用该<mat-icon>元素的记录、暂停和停止按钮.

如果我创建 HTML，我的指令会起作用

<p>BANG!</p>

一切都按照您的预期编译，标签 BANG! 正如我所期望的那样显示在我的 textarea 控件旁边，但是当我将 HTML 更改为

<mat-icon>not_started</mat-icon>

我在编译过程中收到以下消息：-

src/app/shared/components/speech-to-text/speech-to-text.component.html:2:5 - error NG8001: 'mat-icon' is not a known element:
1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

2     <mat-icon>not_started</mat-icon>
      ~~~~~~~~~~

  src/app/shared/components/speech-to-text/speech-to-text.component.ts:5:18
    5     templateUrl: './speech-to-text.component.html',
                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SpeechToTextComponent.

我不知道如何通知 Angular 我希望使用 MatIconModule？

澄清

该组件是通过使用指令启动的

this.overlayRef.attach(new ComponentPortal(SpeechToTextComponent))

我没有在任何模块中引用该组件，因为它是动态附加到覆盖层的。但是，我确实MatIconModule在我的文件中导入了app.module.ts文件，但没有效果。

标签： angularangular-cdkangular-ivy

Answer 1

MatIconModule在imports您的app.module.tsor (如果存在)中添加speech-to-text.module.ts。