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

Question

我正在尝试通过使用指令 [appSpeechToText] 在我的应用程序中实现语音转文本功能，我可以将其应用于任何 input/textarea 字段，该组件基本上显示录制、暂停和停止按钮我希望使用 <mat-icon> 元素。

如果我创建 HTML

我的指令有效

<p>BANG!</p>

一切都按您预期的那样编译，标签 BANG！正如我所期望的那样显示在我的文本区域控件旁边，但是当我将 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))

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

Answer 1

将 MatIconModule 添加到 app.module.ts 中的 imports 或（如果存在）speech-to-text.module.ts.

Answer 2

import { MatIconModule } from '@angular/material/icon'

Answer 3

您的应用模块 .ts 文件中很可能缺少模块导入。

如果您刚刚开始使用 Angular Material 组件，请务必参考入门指南： https://material.angular.io/guide/getting-started 和图标组件参考： https://material.angular.io/components/icon/api

Answer 4

对其进行排序我需要将 SpeechToTextComponent 添加到我的 app.module.ts 文件中的 declarations 数组中，因为需要同时引用指令和组件如上所述将它放入它自己的模块中可能是有意义的。

import { NgModule } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { SpeechToTextComponent } from '../components/speech-to-text/speech-to-text.component';
import { SpeechToTextDirective } from '../directives/speech-to-text.directive';

@NgModule({
    imports: [MatIconModule],
    declarations: [SpeechToTextComponent, SpeechToTextDirective],
    exports: [SpeechToTextDirective]
})
export class SpeechToTextModule {}

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

How do I include an Angular component that contains other non HTML elements like mat-icon via CDK Overlay

angular

angular-cdk

angular-ivy