Angular Material 在 StackBlitz 中似乎不起作用

Question

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

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

https://stackblitz.com/edit/angular-e4qp5q

更新

该链接现在处于工作状态。问题是我没有包含样式导入。

Answer 1

样式.css

需要一个主题，例如

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

参见 - https://material.angular.io/guide/theming

更新

如果其他人遇到不同的问题，我将添加让 Stackblitz 使用 Angular Materials 的常见问题:

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

list

1. 检查主题是否在 styles.css
2. 检查是否需要 hammer.js(请参阅 API 选项卡上的任何斜体注释)，如果需要，请将 import 'hammerjs'; 添加到 polyfills.ts 。请注意，在您的应用程序中，您将在应用程序的入口点(例如 src/main.ts)执行此操作。请参阅网站上的入门指南https://material.angular.io/guides
3. 确保导入 BrowserAnimationsModule
4. 确保从 Material 中导入特定组件的相关模块，例如 import {MatAutocompleteModule} from '@angular/material/autocomplete';。网站上的示例全部导入。当我只想准确导入所需内容时，我的策略是导入 API 选项卡上显示的模块，然后用谷歌搜索错误消息，例如mat-form-field 必须包含一个 MatFormFieldControl 并找到 stackoverflow 答案以了解缺少 MatInputModule。