Angular Material在StackBlitz中似乎不起作用

Question

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

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

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

更新资料

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

Answer 1

styles.css

需要一个主题，例如

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

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

更新

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

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

清单

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

Answer 2

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

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

https://material.angular.io/guide/getting-started#step-4-include-a-theme

安德鲁艾伦更快:)