Angular 踩坑指南

• Material 组件库

在项目中安装Material组件库时，按以下步骤：

 1. npm i @angular/material @angular/cdk @angular/animations
 2. 在全局style.scss文件中，引入material主题样式
	@import '@angular/material/prebuilt-themes/indigo-pink.css';
	@import '@angular/material/prebuilt-themes/purple-green.css';
 3. 在全局index.html文件中，引入material icon
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 4. 在文件ployfills.ts中，引入适应浏览器文件
	npm i web-animations-js 
	import 'web-animations-js';
 5. 配置动画
	安装动画包后，导入browserAnimationsModule到您的应用程序中以启用动画支持。
	import {browserAnimationsModule} from '@angular/platform-browser/animations';
	
	@NgModule({
 	 ...
  	imports: [browserAnimationsModule],
 	 ...
	})
 6. 手势支持
	npm install --save hammerjs
 7. 导入组件模块
	为要使用的每个组件导入NgModule（需放在browserModule后）：
	import {MatButtonModule, MatCheckBoxModule} from '@angular/material';

	@NgModule({
  	...
 	imports: [browerModule, MatButtonModule, MatCheckBoxModule],
 	...
	})

 

• CodeMirror代码编辑器

 - 更改编辑器高度：

:host() ::ng-deep .CodeMirror {
  height: 100%;
}