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

Question

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

我读过一个类似的问题，但这对我不起作用，我的应用程序使用 Angular 7.0.0 和 Angular Material 7.0.0。

所以，我想在我的演示应用程序中使用大多数角度材料组件，最好的方法是什么，所有这些。

我读了很多文章和教程，比如 Angular Material 2 入门或这个，但在所有这些文章中，他们只使用基本组件，或者教程是关于旧版本的 Angular 材质的，当前的官方文档没有提供可用组件的列表导入当前版本以及如何使用这些组件顺便说一下？

我的应用程序模块与基本组件：(更新的代码(

// 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 {}

我在类似的问题中找到了这段代码，但是当将其添加到单独的文件中然后导入到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] 材料模块

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 {}

2. app.module.ts

从"@angular/平台浏览器"导入 { 浏览器模块 };

从"@angular/核心"导入 { NgModule };

从"@angular/通用"导入 { 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 { }