材料设计未显示角度 12答案

【问题标题】：Material design not showing angular 12材料设计未显示角度 12
【发布时间】：2021-11-07 03:05:56
【问题描述】：

材料设计没有出现在 Angular 12 中。嗨，我是 Angular 新手（初学者）。我尝试在 angular 12 上使用一些材料设计元素，但在我的测试应用程序中看不到材料设计的变化。

以下是重现的步骤：

我使用ng new test-anugular-mat 创建了一个应用“test-anugular-mat”。
创建后，我使用ng add @angular/material 向应用程序添加了角度。在这里，我禁用了“排版样式”并启用了“浏览器动画”。
在app.module.ts 中添加了导入的MatButton

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButton} from '@angular/material/button'

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButton
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

并在我的index.html 中添加了以下内容。

<h1>testing angular material</h1>
<p>testing angular material!!!</p>
<button mat-fab>test button</button>
<mat-card>Simple card</mat-card>

这是我得到的输出，而不是使用 ng serve 时所需的角度按钮或卡片

所以我应该得到材料设计，我在这里做错了什么？

【问题讨论】：

标签： angular angular-material material-design angular12

【解决方案1】：

也许你把“

【讨论】：

我以为我把fab 打错了tab 但我得到的结果是一样的。查看卡片<mat-card>结果。
阅读我答案末尾的新编辑，我希望是错误的，你可以解决它。
mat 卡是正常的，它不工作，因为你没有导入它的模块。您只需导入 MatButton，而不是 MatCardModule

【解决方案2】：

您应该导入MatButtonModule 而不是MatButton。查看正确的导入语法https://material.angular.io/components/button/api

【讨论】：