typescript Angular 4 Material - mat-button 样式未在 mat-dialog 组件中应用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47067153/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 4 Material - mat-button style not being applied in mat-dialog component
提问by GreatHam
I want to create a mat-dialogwith a default-style mat-buttonfor closing the dialog. Everything works except the button lacks the Material Design style applied by Angular Material.
我想创建一个用于关闭对话框mat-dialog的默认样式mat-button。除了按钮缺少 Angular Material 应用的 Material Design 样式外，一切正常。
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.
如何让样式显示出来？AFAIK 我已经根据需要导入了所有模块，并正确设置了 Angular Material 的每个部分，包括主题。
my-dialog.component.ts:
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:
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:
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 { }
回答by GreatHam
Newly imported modules need to be added to imports:
新导入的模块需要添加到imports：
@NgModule{
...
imports: [
BrowserModule,
BrowserAnimationsModule,
MatCardModule,
MatDialogModule,
MatButtonModule
],
...
})
回答by Junaid
If you have other things working but not a specific component, make sure that component's module is imported & imported correctly.
如果您有其他工作但不是特定组件，请确保组件的模块已正确导入和导入。
I had the same issue where I had a CustomMaterialModulewhere I was importing all the Material ModulesI needed to use in my app. I was using mat-button but its style wasn't there. After a few minutes of searching, I found out that I had put MatButtonModule only in imports array of my CustomMaterialModule& not in exports array.
我遇到了同样的问题，我有一个CustomMaterialModule，我在其中导入了我需要在我的应用程序中使用的所有材料模块。我正在使用 mat-button 但它的样式不存在。经过几分钟的搜索，我发现我只将 MatButtonModule 放在我的CustomMaterialModule 的导入数组中，而不是放在导出数组中。
Note: my CustomMaterialModule hosts all the Material Modules I need in my app so modules like MatButtonModule will go in my CustomMaterialModule imports and exports array and later I would only use my CustomMaterialModule in other places of my app. I did this to keep the code clean and easy for editing. So for example, if one month down the road I don't need a Material Module I can just remove it from my CustomMaterialModule and not worry about it.
注意：我的 CustomMaterialModule 在我的应用程序中承载了我需要的所有材料模块，所以像 MatButtonModule 这样的模块将进入我的 CustomMaterialModule 导入和导出数组，然后我只会在我的应用程序的其他地方使用我的 CustomMaterialModule。我这样做是为了保持代码干净且易于编辑。因此，例如，如果一个月后我不需要材料模块，我可以将它从我的 CustomMaterialModule 中删除而不必担心。
回答by bresleveloper
In my case i have 2 extra modules, 1 for the mat-stuff, and another for components.
就我而言，我有 2 个额外的模块，1 个用于垫子，另一个用于组件。
Initially i added both modules to the app-module but that didnt work.
最初我将这两个模块都添加到 app-module 中，但这没有用。
i moved the mat-module import into the components-module (discarding from app-module, not must) and it worked, i guess its because the DI.
我将 mat-module 导入移动到 components-module（从 app-module 中丢弃，不是必须的）并且它起作用了，我猜是因为 DI。
回答by mohit uprim
Some issue that i noticed are -
我注意到的一些问题是 -
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material' in your my-dialog.component.ts
constructor(public dialog: MatDialog) {} is missing
MatButtonModule is not imported inside app.module.ts file
在 my-dialog.component.ts 中从“@angular/material”导入 {MatDialog, MatDialogRef, MAT_DIALOG_DATA}
构造函数（公共对话框：MatDialog）{} 缺失
MatButtonModule 未在 app.module.ts 文件中导入
You can also follow this(https://material.angular.io/components/dialog/overview) example
你也可以按照这个（https://material.angular.io/components/dialog/overview）例子
