Angular 使用扩展 【经常用到的一些库】

目录

1. mock后端服务

2. 安装material步骤：

3. 使用Angular Flex-layout：

4. 在Angular 8引入less及使用方法： 

5. Angular overlay介绍

---

1. mock后端服务

在后端服务还没有准备好之前，当前端需要向后端服务发出请求（GET/POST/PUT/DELETE），让后端更新数据，并且返回给前端时，可以造个假的。

可以安装一个json-server，就可以作为服务器接受客户端的RESTful请求（GET/POST/PUT/DELETE）了。

npm install --global json-server

 

2. 安装material步骤：

1. ng new my-app （创建好后可在默认端口4200打开）
2. npm install --save @angular/material @angular/cdk @angular/animations
3. 在全局CSS里（styles.css）添加：@import "~@angular/material/prebuilt-themes/indigo-pink.css";
4. npm install --save hammerjs，然后在app.module.ts里import 'hammerjs';
5. 在全局HTML里（index.html）添加：
6. 在app.module.ts里引入component modules，包括但不局限于：import {MatButtonModule, MatCheckboxModule} from '@angular/material';  import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
7. 完成

3. 使用Angular Flex-layout：

1. npm install @angular/flex-layout
2. 在app.module.ts里引入，import {FlexLayoutModule} from '@angular/flex-layout';

CSS flex-wrap 指定 flex 元素单行显示还是多行显示 。如果允许换行，这个属性允许你控制行的堆叠方向。

4. 在Angular 8引入less及使用方法： 

1.  npm install less --save
2.  修改angular.json文件的2处： 

  

 "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              
              "src/styles.less"
            ],

 "schematics": {
        "@schematics/angular:component": {
          "styleext": "less"
        }

 3. 修改组件component下的ts文件的 styleUrls: ['./user-hint.component.less']

4. 在组件component下的less文件引入 @import '../../styles.less';

5. 完成

5. Angular overlay介绍

Overlay中文翻译过来意思是覆盖物，它是Material Design components for Angular中针对弹出动态内容这一场景的封装，功能强大、使用方便，尤其在开发自己的组件库时，可以让你少写许多代码，可以说只要是弹出内容的场景基本都可以使用Overlay.
我们自己的组件库中弹出场景基本都已经使用Overlay，如自定义Select、Cascader、Tree Select、Tooltip、Dialog等，总结最重要的的两点好处：

1. 让使用者不再进行繁琐的位置计算，而简单通过参数配置就实现内容的定位，而且关于位置的各种情况都有考虑到.
2. 组件的弹出内容都是用Overlay实现，避免了各自实现的产生的不兼容，如相互遮盖问题.

 如点击A组件弹出B组件，那么要在【module】里设置B组件为入口文件，如下：

StatebarMenuComponent 是 弹出的overlay。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { StatebarComponent } from './statebar-dashboard/statebar.component';
import { FlexLayoutModule } from '@angular/flex-layout';
import { StatebarMenuComponent } from './statebar-menu/statebar-menu.component';

@NgModule({
  entryComponents: [StatebarMenuComponent],
  declarations: [ StatebarComponent, StatebarMenuComponent ],
  imports: [
    CommonModule,
    FlexLayoutModule,
  ],
  exports: [StatebarComponent, StatebarMenuComponent],
})
export class StatebarModule { }