Angular Material 似乎在 StackBlitz 中不起作用

Question

在尝试复制我遇到的另一个问题时，我尝试使用 StackBlitz 来复制。

但是 Angular Material 似乎在 StackBlitz 上不起作用....关于我可能做错了什么的任何建议或想法？

link 现在处于正常工作状态。问题是我没有包含样式导入。

Answer 1

styles.css

需要一个主题，例如

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

更新

如果其他人遇到不同的问题，我将添加让 Stackblitz 与 Angular 一起工作的常见问题材料：

请注意，每个组件都有一个最新的 stackblitz - 每个组件的 link 位于每个组件最右侧的 Examples 选项卡上例如 https://material.angular.io/components/slider/examples

清单

检查主题已开启 styles.css
检查是否需要 hammer.js（请参阅 API 选项卡上的任何斜体注释），如果需要，请将 import 'hammerjs'; 添加到 polyfills.ts。请注意，在您的应用程序中，您将在应用程序的入口点（例如 src/main.ts）执行此操作。请参阅网站入门指南 https://material.angular.io/guides
确保导入 BrowserAnimationsModule
确保从 material 例如 import {MatAutocompleteModule} from '@angular/material/autocomplete'; 导入特定组件的相关模块。网站上的示例全部导入。当我只想准确导入所需内容时，我的策略是导入 API 选项卡上显示的模块，然后 google 错误消息，例如mat-form-field must contain a MatFormFieldControl 并找到 Whosebug 答案知道缺少 MatInputModule。

Answer 2

您需要在应用程序中导入主题。将此行添加到 styles.css:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

安德鲁·艾伦更快 :)

Angular Material does not seem to work in StackBlitz