5

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

然而，Angular Material 似乎不适用于 StackBlitz ......关于我可能做错的任何建议或想法？

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

更新

该链接现在正常工作。问题是我没有包含样式导入。

4

2 回答 2

6

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丢失了。
于 2019-07-24T13:59:07.503 回答
5

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

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

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

安德鲁艾伦更快:)

于 2019-07-24T13:59:15.693 回答