![style style](https://c1.lmlphp.com/image/static/default_avatar.gif)
本文介绍了Angular 4 Material - mat-button 样式未应用在 mat-dialog 组件中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想创建一个带有默认样式 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-browser';从'@angular/core' 导入 { NgModule };从@angular/platform-browser/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 组件中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!