Angular 4 Material - mat-button 样式未应用在 mat-dialog 组件中 [英] Angular 4 Material - mat-button style not being applied in mat-dialog component

问题描述

我想创建一个带有默认样式 mat-button 的 mat-dialog 来关闭对话框.一切正常，除了按钮缺少 Angular Material 应用的 Material Design 样式.

如何让样式显示出来?AFAIK 我已经根据需要导入了所有模块，并且 正确设置了 Angular Material 的每个部分，包括主题.

my-dialog.component.ts:

import { Component, OnInit } from '@angular/core';@成分({选择器:'app-my-dialog',templateUrl: './my-dialog.component.html',styleUrls: ['./my-dialog.component.css']})导出类 MyDialogComponent 实现 OnInit {构造函数(){}ngOnInit() {}}

my-dialog.component.html:

Lorem Ipsum
<div mat-dialog-content>...

<button mat-button mat-dialog-close>关闭</button>

app.module.ts:

import { BrowserModule } from '@angular/platform-b​​rowser';从'@angular/core' 导入 { NgModule };从@angular/platform-b​​rowser/animations"导入 { BrowserAnimationsModule };从@angular/material"导入 { MatCardModule, MatDialogModule, MatButtonModule }从 './app.component' 导入 { AppComponent };从 './my-dialog/my-dialog.component' 导入 { MyDialogComponent };@NgModule({声明: [应用组件，我的对话框组件],进口:[浏览器模块，浏览器动画模块，垫卡模块，对话框模块],提供者:[]，引导程序:[AppComponent]，入口组件:[我的对话框组件]})导出类 AppModule { }

解决方案

新导入的模块需要添加到imports:

@NgModule{...进口:[浏览器模块，浏览器动画模块，垫卡模块，垫对话框模块，垫按钮模块],...})

I want to create a mat-dialog with a default-style mat-button for closing the dialog. Everything works except the button lacks the Material Design style applied by Angular Material.

How do I get the style to show? AFAIK I have imported all modules as required and properly set up each part of Angular Material including the themes.

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

解决方案

Newly imported modules need to be added to imports:

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

这篇关于Angular 4 Material - mat-button 样式未应用在 mat-dialog 组件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！