webentwicklung-frage-antwort-db.com.de

Angular 4 Material - Matte-Button-Stil wird in der Mat-Dialog-Komponente nicht angewendet

Ich möchte einen mat-dialog mit einem Standardstil mat-button erstellen, um den Dialog zu schließen. Alles funktioniert, außer der Schaltfläche fehlt der von Angular Material angewendete Materialdesign-Stil.

Wie bekomme ich den Stil zum Anzeigen? AFAIK Ich habe alle Module nach Bedarf importiert und jeden Teil des Winkelmaterials einschließlich der Designs richtig einrichten .

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

Neu importierte Module müssen zu imports hinzugefügt werden:

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

Wenn andere Dinge funktionieren, aber keine bestimmte Komponente, Stellen Sie sicher, dass das Modul der Komponente korrekt importiert und importiert wurde.

Ich hatte das gleiche Problem, bei dem ich ein CustomMaterialModule hatte, bei dem ich alle Material Modules importierte, die ich in meiner App verwenden musste . Ich habe mat-button benutzt, aber der Stil war nicht da. Nach einigen Minuten der Suche stellte ich fest, dass ich MatButtonModule nur in das Import-Array meines CustomMaterialModule & nicht in das Export-Array eingefügt hatte.

Hinweis: Mein CustomMaterialModule hostet alle Materialmodule, die ich in meiner App benötige, sodass Module wie MatButtonModule in mein CustomMaterialModule-Array importiert und exportiert werden und ich mein CustomMaterialModule später nur an anderen Stellen meiner App verwenden würde. Ich habe dies getan, um den Code sauber und einfach für die Bearbeitung zu halten. Wenn ich zum Beispiel einen Monat später kein Materialmodul benötige, kann ich es einfach aus meinem CustomMaterialModule entfernen und mache mir keine Sorgen darüber.

2
Junaid

Einige Probleme, die mir aufgefallen sind, sind -

  • importieren Sie {MatDialog, MatDialogRef, MAT_DIALOG_DATA} aus '@ angle/material' in Ihrer my-dialog.component.ts

  • konstruktor (öffentlicher Dialog: MatDialog) {} fehlt

  • MatButtonModule wird nicht in die Datei app.module.ts importiert

Sie können auch diesem Beispiel folgen ( https://material.angular.io/components/dialog/overview )

1
mohit uprim

In meinem Fall habe ich 2 zusätzliche Module, 1 für die Matte und ein weiteres für Komponenten.

Anfangs habe ich beide Module zum App-Modul hinzugefügt, aber das hat nicht funktioniert.

ich habe den Import des Mat-Moduls in das Komponenten-Modul verschoben (muss nicht aus dem App-Modul entfernt werden) und es hat funktioniert.

0
bresleveloper