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一起使用：

请注意，每个组件都有最新的堆栈闪击-每个组件的链接都位于每个组件最右侧的示例标签上 例如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”标签上显示的模块，然后在Google上显示错误消息，例如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

安德鲁·艾伦（Andrew Allen）更快：）