如何导入.ts文件中的模块？

Question

我有一个文件material.ts，如下所示：

export { MatFormFieldModule } from '@angular/material/form-field';
export { MatPasswordStrengthModule } from '@angular-material-extensions/password-strength';
export {MatInputModule} from '@angular/material/input'
export {MatSlideToggleModule} from '@angular/material/slide-toggle'
export { MatIconModule } from '@angular/material/icon';

在模块文件中，我希望导入上述所有材料模块，如下所示：

import { NgModule } from '@angular/core';
import { SignUpComponent } from './components/sign-up/sign-up.component';
import { signUpRoutingModule } from './sign-up-routing.module';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {MatFormFieldModule,MatPasswordStrengthModule,MatInputModule,MatSlideToggleModule,MatIconModule} from '@shared/modules/material'

const modules = [
  signUpRoutingModule,
  MatFormFieldModule,
  MatPasswordStrengthModule,
  CommonModule,
  FormsModule,
  ReactiveFormsModule,
  MatInputModule,
  MatSlideToggleModule,
  MatIconModule,

];
const components = [SignUpComponent];
@NgModule({
  imports: [...modules],
  declarations: [...components],
})
export class signUpModule {}

但是，当我在MatFormFieldModule中使用上述材料模块的任何组件时，假设mat-form-field，它就会告诉我

'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.ngtsc(-998001)

请多多帮助me.Thanks。

Answer 1

使用name.ts创建一个文件，然后像这样导入和导出所有的mat_modules。然后简单地导入这个文件，在其中添加所有mat模块。

//角材料部件

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

@NgModule({
  exports: [
    MatCheckboxModule,
    MatCheckboxModule,
    MatButtonModule,
    MatInputModule,
    MatAutocompleteModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatMenuModule,
    MatSidenavModule,
    MatToolbarModule,
    MatListModule,
    MatGridListModule,
    MatCardModule,
    MatStepperModule,
    MatTabsModule,
    MatExpansionModule,
    MatButtonToggleModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatDialogModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule,
    CdkTableModule,
    MatNativeDateModule
  ],
})
export class MaterialModule { }