Блог

Я пытаюсь реализовать функцию преобразования речи в текст в своем приложении, используя директиву [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 файл, но безрезультатно.

Либо добавьте MatIconModule imports в свой app.module.ts or (если он существует) speech-to-text.module.ts .

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

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

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

После сортировки мне нужно было добавить 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 {}