不能在自定義角度組件中使用角度“mat-form-field”

我正在嘗試為我應該能夠在任何地方匯入的標簽串列創建一個組件。

該組件被呼叫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' 不是已知元素。

uj5u.com熱心網友回復：

您需要匯入MatFormFieldModule在該模塊中TagListComponent宣告（即- SharedModule）

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

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

標籤：

上一篇：在ngforangular中添加一些控制元件

下一篇：如何在chart.js/ng2-charts中為極坐標圖背景中的單個環著色？