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

川长思鸟来 2022-01-16 00:53 294阅读 0赞

**目录**

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）添加：<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
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 { }

## ##

[CSS]: https://developer.mozilla.org/zh-CN/docs/CSS