如何在我的项目中使用角度/材质版本 7.0.1 组件？

Question

我开始使用 Google Material Design 学习 Angular，到目前为止一切顺利，我使用来自 https://angular.io/tutorial 和 https://material.angular.io/guides 网站的官方文档创建了我的前端应用程序。

我阅读了similar question，但这对我不起作用，我的应用使用 Angular 7.0.0 和 Angular Material 7.0.0。

所以，我想在我的演示应用程序中使用大部分 Angular Material Components，最好的方法是什么？

我阅读了很多文章和教程，如Getting Started With Angular Material 2 或this one，但在所有这些文章和教程中，它们都只是使用了基本组件，或者教程是关于旧版本的 Angular Material 并且当前的官方文档没有提供当前版本的可用组件列表以及如何使用这些组件？

我的 app.module.ts 和基本组件：（更新代码）

// angular component and 
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from "@angular/forms";

// my components
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { NavigationComponent } from "./header/navigation/navigation.component";
import { ContainerComponent } from './container/container.component';
import { NavComponent } from './nav/nav.component';


// add animaitons for material 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// add CDK layout for material
import { LayoutModule } from "@angular/cdk/layout";
// add material to module
import { MaterialModule } from "./class/material.module"

@NgModule({
  imports: [
    BrowserModule,
    FormsModule, ReactiveFormsModule,
    BrowserAnimationsModule,
    LayoutModule,
    MaterialModule
  ],
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    NavigationComponent,
    ContainerComponent,
    NavComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

我在similar question 中找到此代码，但是当将其添加到单独的文件中然后导入到app.module.ts 时，我的应用程序停止工作，我将在浏览器中看到加载消息。 （更新代码）

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

import { 
  MatButtonModule, 
  MatToolbarModule, 
  MatSidenavModule, 
  MatCheckboxModule,
  MatIconModule,
  MatListModule
 } from "@angular/material";
@NgModule({
  imports: [
    MatButtonModule,
    MatToolbarModule,
    MatSidenavModule,
    MatCheckboxModule,
    MatIconModule,
    MatListModule
  ],
  exports: [
    MatButtonModule,
    MatToolbarModule,
    MatSidenavModule,
    MatCheckboxModule,
    MatIconModule,
    MatListModule
  ]
})
export class MyMaterialModule {}

（更新） 现在，我只修复了我的类文件夹中的material.module.ts，但我仍然无法添加其他组件。像以下组件：

import {
  MatNativeDateModule,
  MatSnackBarModule,
  MatDialogModule,
  MatTableModule,
  MatPaginatorModule,
  MatSortModule,
  MatTabsModule,
  MatCheckboxModule,
  MatCard,
  MatCardModule,
  MatFormField,
  MatFormFieldModule,
  MatProgressSpinnerModule,
  MatInputModule
} from "@angular/material";
import { MatDatepickerModule } from "@angular/material/datepicker";
import { MatRadioModule } from "@angular/material/radio";
import { MatSelectModule } from "@angular/material/select";
import { MatSliderModule } from "@angular/material/slider";
import { MatDividerModule } from "@angular/material/divider";

Answer 1

使用单独文件时需要使用comman模块：

1] 材料.module.ts

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

import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';

import {
  MatAutocompleteModule,
  MatBadgeModule,
  MatBottomSheetModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatDividerModule,
  MatExpansionModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatStepperModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,
  MatTreeModule
} from '@angular/material';

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

1. app.module.ts

从 '@angular/platform-b​​rowser' 导入 { BrowserModule }；

从'@angular/core'导入{ NgModule }；

从“@angular/common”导入 { CommonModule }；

从 '@angular/forms' 导入 { NgForm,ReactiveFormsModule }；

import {
  HttpClient,
  HTTP_INTERCEPTORS,
  HttpClientModule
} from '@angular/common/http';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material/material.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { NavigationComponent } from "./header/navigation/navigation.component";
import { ContainerComponent } from './container/container.component';
import { NavComponent } from './nav/nav.component';
import { LayoutModule } from "@angular/cdk/layout";
@NgModule({
  declarations: [
   AppComponent,
    HeaderComponent,
    FooterComponent,
    NavigationComponent,
    ContainerComponent,
    NavComponent,
    NgForm
  ],
  imports: [
    CommonModule,
    MaterialModule,
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    HttpClientModule,
LayoutModule
  ],
  providers: [ ],
  bootstrap: [AppComponent]
})
export class AppModule { }