javascript - Hur använder man angular/material version 7.0.1 komponent i mitt projekt?

Jag börjar lära mig Angular med Google Material Design, hittills går det bra, jag skapar min front-end app med den officiella dokumentationen från https://angular.io/tutorial och https://material.angular.io/guides webbplatser.

Jag läste en liknande fråga men det fungerar inte för mig, min app använder Angular 7.0.0 med Angular Material 7.0.0.

Så, jag vill använda de flesta av Angular Material-komponenterna i min demoapp, vad är det bästa sättet att ha alla dem.

Jag har läst många artiklar och tutorials som Getting Started With Angular Material 2 eller denna, men i alla dem använder de bara de grundläggande komponenterna eller så handlar tutorialen om en gammal version av Angular Material och den nuvarande officiella dokumentationen tillhandahåller inte listan över tillgängliga komponenter att importera för den nuvarande versionen och hur man använder dessa komponenter förresten?

Min app.module.ts med grundläggande komponent:(Uppdaterad kod)

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

Jag hittar denna kod i en liknande fråga, men när jag lägger till den i en separat fil och sedan importerar till app.module.ts, slutar min app att fungera och jag ser bara laddningsmeddelandet i webbläsaren. (Uppdaterad kod)

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

(Uppdaterad) För tillfället fixar jag bara material.module.ts i min klassmapp, men jag kan fortfarande inte lägga till andra komponenter, som följande komponenter:

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";

Svar #1

Du behöver använda gemensam modul när du använder separat fil:

1] material.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

import { BrowserModule } från '@angular/platform-browser';

import { NgModule } från '@angular/core';

import { CommonModule } från '@angular/common';

import { NgForm,ReactiveFormsModule } from '@angular/forms';

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

Relaterade artiklar