Как включить компонент Angular, который содержит другие элементы, отличные от HTML, такие как матовый значок, через CDK Overlay

Я пытаюсь реализовать функцию «Речь в текст» в своем приложении с помощью директивы [appSpeechToText], которую я могу применить к любому полю ввода/текстовой области, компонент в основном отображает кнопки «Запись», «Пауза» и «Стоп», для которых я хочу использовать <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, но безрезультатно.


angular angular-ivy angular-cdk
person Andrew HB    schedule 10.11.2020    source источник

Ответы (4)


arrow_upward
3
arrow_downward

Либо добавьте MatIconModule к imports в вашем app.module.ts, либо (если есть) speech-to-text.module.ts.

person Marek W    schedule 10.11.2020
comment
спасибо, я включил MatIconModule в свой файл app.module.ts, я добавил некоторые пояснения к своему исходному вопросу. - person Andrew HB; 10.11.2020
comment
Мое первое предположение будет заключаться в том, что компонент не привязан к app.module, поэтому требуется собственный модуль, такой как speech-to-text.module.ts, и импорт туда модуля Mat. - person Marek W; 10.11.2020

arrow_upward
0
arrow_downward

Скорее всего, вам не хватает импорта модуля в файле .ts вашего модуля приложения.

Если вы только начинаете работать с компонентами Angular Material, обязательно обратитесь к руководству по началу работы: https://material.angular.io/guide/getting-started И ссылка на значок компонента: https://material.angular.io/components/icon/api

person nsndvd    schedule 10.11.2020
comment
спасибо, я включил MatIconModule в свой файл app.module.ts, я добавил некоторые пояснения к своему первоначальному вопросу. - person Andrew HB; 10.11.2020
comment
тогда, вероятно, ваш компонент принадлежит другому модулю, и этот модуль должен импортировать MatIconModule. - person nsndvd; 10.11.2020
comment
Как предложил Марек В., речь-в-текст.модуль.тс или что-то в этом роде - person nsndvd; 10.11.2020
comment
Может быть, попробуйте это angular.io/guide/sharing-ngmodules @AndrewHB - person nsndvd; 10.11.2020

arrow_upward
0
arrow_downward

После сортировки мне нужно было добавить SpeechToTextComponent в массив declarations в моем файле app.module.ts, сказав, что из-за необходимости ссылаться как на директиву, так и на компонент, вероятно, имеет смысл поместить его в собственный модуль, как упоминалось выше.

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 {}
person Andrew HB    schedule 10.11.2020

arrow_upward

arrow_downward

person    schedule
comment
спасибо, я включил MatIconModule в свой файл app.module.ts, я добавил некоторые пояснения к своему исходному вопросу. - person Andrew HB; 10.11.2020
comment
импортировать MatIconModule в файл speech-to-text.component.ts - person Vinay; 10.11.2020