无法在自定义 angular 组件中使用 angular 'mat-form-field'

Question

我正在尝试为我应该能够在任何地方导入的标签列表创建一个组件。

该组件称为 tag-list-component.ts 并导入到我的共享模块中：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { MatNativeDateModule } from '@angular/material/core';

import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatChipsModule } from '@angular/material/chips';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';

import { FilesizePipe } from './pipes/filesize.pipe';
import { LocaleDatePipe } from './pipes/locale-date.pipe';
import { TruncatePipe } from './pipes/truncate.pipe';

import { DisabledControlDirective } from 'src/app/shared/disabled-control.directive';

import { QRCodeModule } from 'angularx-qrcode';
import { NgxFileDropModule } from 'ngx-file-drop';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { TagListComponent } from './components/tag-list/tag-list.component';

@NgModule({
    declarations: [
        FilesizePipe,
        LocaleDatePipe,
        TruncatePipe,
        DisabledControlDirective,
        TagListComponent,
    ],
    exports: [
        CommonModule,
        RouterModule,
        FormsModule,
        ReactiveFormsModule,
        MatNativeDateModule,
        MatAutocompleteModule,
        MatButtonModule,
        MatButtonToggleModule,
        MatCardModule,
        MatCheckboxModule,
        MatChipsModule,
        MatDatepickerModule,
        MatDialogModule,
        MatExpansionModule,
        MatFormFieldModule,
        MatGridListModule,
        MatIconModule,
        MatInputModule,
        MatListModule,
        MatMenuModule,
        MatPaginatorModule,
        MatProgressSpinnerModule,
        MatRadioModule,
        MatSelectModule,
        MatSidenavModule,
        MatSlideToggleModule,
        MatSnackBarModule,
        MatSortModule,
        MatTableModule,
        MatTabsModule,
        MatToolbarModule,
        MatTooltipModule,
        FilesizePipe,
        LocaleDatePipe,
        TruncatePipe,
        QRCodeModule,
        NgxFileDropModule,
        ClipboardModule,
        DisabledControlDirective,
        TagListComponent
    ],
    providers: [
        MatDatepickerModule,
    ],
})
export class SharedModule { }

本身在SharedChildModule中导入（用于测试）

import { NgModule } from '@angular/core';

import { TranslateModule } from '@ngx-translate/core';

import { SharedModule } from './shared.module';

@NgModule({
    imports: [ TranslateModule.forChild() ],
    exports: [
        TranslateModule,
        SharedModule,
    ],
})
export class SharedChildModule { }

我正在尝试使用名为 project-list.component.html 的文件中的组件：

...
<app-tag-list></app-tag-list>
...

它是 projects.module.ts 的一部分，它使用 SharedChildModule（因此通过扩展导入 SharedChild，然后技术上应该导入 TagListComponent）

import { NgModule } from '@angular/core';
...
import { SharedChildModule } from '../../shared/shared-child.module';
...
@NgModule({
    declarations: [
        ...
    ],
    imports: [SharedChildModule, StatsModule],
})
export class ProjectsModule {}

这是TagListComponent的当前内容：

<mat-form-field>
    <mat-label translate>project.list.searchByTags</mat-label>
    <input />
</mat-form-field>

但我遇到了这个错误：'mat-form-field' 不是已知元素。

Answer 1

您需要在声明 TagListComponent 的模块中导入 MatFormFieldModule（即 - SharedModule)

import {MatFormFieldModule} from '@angular/material/form-field';

@NgModule({
    declarations: [
        ...
        TagListComponent,
    ],
    imports: [
       ...
       MatFormFieldModule
    ],
    exports: [
        ...
        TagListComponent
    ],
    providers: [
        ...
    ],
})
export class SharedModule { }

无法在自定义 angular 组件中使用 angular 'mat-form-field'

Can't use angular 'mat-form-field' inside custom angular component

javascript

components

typescript

angular