web-dev-qa-db-ja.com

Angular 4 Material-mat-dialogコンポーネントにmat-buttonスタイルが適用されていない

ダイアログを閉じるために、デフォルトのスタイルmat-dialogでmat-buttonを作成します。ボタンがAngular Material。

スタイルを表示するにはどうすればよいですか？知っている限り、必要に応じてすべてのモジュールをインポートしました Angularテーマを含むマテリアル .

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 { }
htmlangulartypescriptangular-material2
9
GreatHam

新しくインポートされたモジュールは、importsに追加する必要があります。

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

他に機能しているものの特定のコンポーネントがない場合は、コンポーネントのモジュールが正しくインポートおよびインポートされていることを確認してください。

CustomMaterialModuleがあり、すべてをインポートしていた同じ問題がありましたMaterial Modulesアプリで使用する必要がありました。私はマットボタンを使用していましたが、そのスタイルはそこにありませんでした。検索の数分後、MatButtonModuleをCustomMaterialModuleのimports配列にのみ配置し、exports配列には配置していないことがわかりました。

注：私のCustomMaterialModuleは、アプリで必要なすべてのマテリアルモジュールをホストするため、MatButtonModuleなどのモジュールはCustomMaterialModuleのインポートおよびエクスポート配列に入り、後でアプリの他の場所でのみCustomMaterialModuleを使用します。これは、コードをクリーンで編集しやすい状態に保つためです。たとえば、1か月後にマテリアルモジュールが必要ない場合は、CustomMaterialModuleから削除するだけで、心配する必要はありません。

2
Junaid

私の場合、2つの追加モジュールがあり、1つはマット用、もう1つはコンポーネント用です。

最初は両方のモジュールをapp-moduleに追加しましたが、うまくいきませんでした。

mat-moduleのインポートをcomponents-moduleに移動し（app-moduleから破棄する必要があります）、それは機能しました。DIであるためだと思います。

1
bresleveloper

私が気づいたいくつかの問題は-

  • my-dialog.component.tsの「@ angular/material」から{MatDialog、MatDialogRef、MAT_DIALOG_DATA}をインポートします。

  • constructor（public dialog：MatDialog）{}がありません

  • MatButtonModuleはapp.module.tsファイル内にインポートされません

この（ https://material.angular.io/components/dialog/overview ）の例に従うこともできます

1
mohit uprim