html - Angular 4 Material - mat-button-stil blir ikke brukt i mat-dialog-komponenten

Jeg ønsker å lage en mat-dialog med en standardstil mat-button for å lukke dialogen. Alt fungerer bortsett fra at knappen mangler Material Design-stilen som brukes av Angular Material.

Hvordan får jeg stilen til å vises? Så vidt jeg vet har jeg importert alle moduler som kreves og riktig satt opp hver del av Angular Material, inkludert temaene.

my-dialog.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-dialog',
  templateUrl: './my-dialog.component.html',
  styleUrls: ['./my-dialog.component.css']
})
export class MyDialogComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

my-dialog.component.html:

<h1 mat-dialog-title>Lorem Ipsum</h1>
<div mat-dialog-content>
  ...
</div>
<button mat-button mat-dialog-close>Close</button>

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCardModule, MatDialogModule, MatButtonModule } from '@angular/material'

import { AppComponent } from './app.component';
import { MyDialogComponent } from './my-dialog/my-dialog.component';

@NgModule({
  declarations: [
    AppComponent,
    MyDialogComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatDialogModule 
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [
    MyDialogComponent
  ]
})
export class AppModule { }

Svar #1

Nylig importerte moduler må legges til i imports:

import { MatButtonModule } from '@angular/material/button'

@NgModule{
  ...
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatDialogModule,
    MatButtonModule
  ],
  ...
})

Svar #2

Verdt å merke seg at det nye Angular 9-bygge systemet krever at du stopper "ng serve"-skriptet og kjører det på nytt etter å ha lagt til en materialmodul

Svar #3

kan også mangle en linje i styles.css

@import '@angular/material/prebuilt-themes/indigo-pink.css';

Svar #4

TL;DR
Hvis du har andre ting som fungerer, men ikke en spesifikk komponent, pass på at komponentens modul er importert og importert korrekt, da moduler må legges til i imports:

@NgModule{
  imports: [
    MatCardModule,
    MatButtonModule
  ]
})

Merk: Husk å stoppe "ng serve"-skriptet og kjøre det igjen etter å ha lagt til materialmodulen, ettersom det nye Angular 9-bysystemet krever dette.

Forklaring:
Jeg hadde det samme problemet hvor jeg hadde en CustomMaterialModule der jeg importerte alle Material Modules jeg trengte å bruke i appen min. Jeg brukte mat-button, men stilen dens var ikke der. Etter noen minutters søking fant jeg ut at jeg hadde satt MatButtonModule bare i imports-arrayen til min CustomMaterialModule og ikke i exports-arrayen.

Merk: min CustomMaterialModule inneholder alle Material-modulene jeg trenger i appen min, så moduler som MatButtonModule vil gå inn i import- og eksportarrayene til min CustomMaterialModule, og senere vil jeg bare bruke min CustomMaterialModule andre steder i appen min. Jeg gjorde dette for å holde koden ren og enkel å redigere. Så for eksempel, hvis jeg om en måned ikke trenger en Material-modul, kan jeg bare fjerne den fra min CustomMaterialModule uten å bekymre meg.

Relaterte artikler