0%

发表于 更新于
本文字数： 11k 阅读时长 ≈ 10 分钟

Rxjs学习之路

1、小贴士

这篇文章是我的Angular Rxjs Series中的第篇四文章，在继续阅读本文之前，您至少应该熟悉系列中的第一篇基础文章：

Rxjs6都改变了些什么？

Rxjs【Observable】

1
// 图谱
2
// ----- 代表一个Observable
3
// -----X 代表一个Observable有错误发生
4
// -----| 代表一个Observable结束
5
// (1234)| 代表一个同步Observable结束
6
7
// 特别提示：以下的操作符介绍均采用rxjs6的写法！！！
阅读全文 »

发表于 更新于
本文字数： 926 阅读时长 ≈ 1 分钟

1、in:name 关键词

1. 这里的name是指仓库的名称
2. 例如在检索栏里输入：in:name ng toast

2、in:description 关键词

1. 这里的description是仓库的描述文字
2. 例如在检索栏里输入：in:description angular calendar

3、in:readme 关键词

阅读全文 »

发表于 更新于
本文字数： 5.5k 阅读时长 ≈ 5 分钟

Rxjs学习之路

1、小贴士

这篇文章是我的Angular Rxjs Series中的第二篇文章，在继续阅读本文之前，您至少应该熟悉系列中的第一篇基础文章：

Rxjs6都改变了些什么？

Rxjs【Observable】

1
// 图谱
2
// ----- 代表一个Observable
3
// -----X 代表一个Observable有错误发生
4
// -----| 代表一个Observable结束
5
// (1234)| 代表一个同步Observable结束
6
7
// 特别提示：以下的操作符介绍均采用rxjs6的写法！！！
阅读全文 »

发表于 更新于
本文字数： 1.5k 阅读时长 ≈ 1 分钟

RxJS 6变化-概述

RxJS 6主要用于Angular应用程序，从Angular 6开始，它是一个强制依赖。

与RxJS版本5相比，RxJS 6（或更高版本）引入了两个重要更改：
1. import的导入结构发生变化
2. pipe()作为一种链接运算符的方法，旧的链接方式将不起作用
3. 一些operator操作符被重命名

特别提示： 如果你让旧的代码仍旧继续使用，你需要进行以下操作（不推荐再用旧的方法了）
npm install --save rxjs-compat  // 安装向后兼容依赖包
阅读全文 »

发表于 更新于
本文字数： 3.9k 阅读时长 ≈ 4 分钟

1. Waiting for another flutter command to release the startup lock…

1
// 杀死dart进程
2
flutter packages pub build_runner watch
3
4
// 终极方案,删除flutter SDK文件夹目录下的bin/cache下边的lockfile文件
5
rm ./flutter/bin/cache/lockfile
阅读全文 »

发表于 更新于
本文字数： 2.2k 阅读时长 ≈ 2 分钟

        我们都知道在Angular的SPA应用中，应用通过路由在各个页面之间进行导航。 默认情况下，用户在离开一个页面时，这个页面(组件)会被Angular销毁，用户的输入信息也随之丢失，当用户再次进入这个页面时，看到的是一个新生成的页面(组件)，之前的输入信息都没了。
        在实际工作中遇到了这样的问题，部分页面需要保存用户的输入信息，用户再次进入页面时需要回到上一次离开时的状态，部分页面每次都要刷新页面，不需要保存用户信息。而页面间的导航正是通过路由实现的，Angular的默认行为不能满足我们的需求！好在Angular提供了RouteReuseStrategy接口，通过实现这个接口，我们就可以自定义路由复用策略。
        具体的实现如下：

阅读全文 »

发表于 更新于
本文字数： 1.6k 阅读时长 ≈ 1 分钟

最近在写项目的时候，产品要求对表单的必填输入项进行友好的校验提示，效果如图：

“ 这个需求很简单，怎么实现我不管。 “ ，还能说什么，就是干，具体实现如下：

  1. 对Angular内置的表单css属性设置想要的样式

    1
    // css样式
    2
    .isvalid {
    3
        border: 1px dashed red !important;
    4
    }

  2. html文件里设置即时样式检测[class.isvalid]

    1
    <!--非formArray-->
    2
    <input formControlName="addressName [class.isvalid]="isFieldInvalidTouched('addressName')" type="text" placeholder="请输入收件人姓名">
    3
    <!--formArray-->
    4
    <input formControlName="addressName [class.isvalid]="isArrayFieldInvalidTouched(i, 'addressName')" type="text" placeholder="请输入收件人姓名">

  3. ts文件里注入核心方法

    1
    // 表单字段校验
    2
    validateAllFormFields(formGroup: any) {
    3
        Object.keys(formGroup.controls).forEach(field => {
    4
          const control = formGroup.get(field);
    5
          if (control instanceof FormControl) {
    6
              control.markAsTouched({ onlySelf: true });
    7
          } else if (control instanceof FormGroup) {
    8
              this.validateAllFormFields(control);
    9
          } else if (control instanceof FormArray) {
    10
              this.validateAllFormFields(control);
    11
          }
    12
        });
    13
     }
    14
    15
    // 表单控件校验
    16
    isFieldInvalidTouched(field: any) {
    17
        return this.form.get(field).invalid && this.form.get(field).touched;
    18
    }
    19
    20
    // 表单控件校验
    21
    isArrayFieldInvalidTouched(index, field: any) {
    22
          return this.xxxArray.controls[index].get(field).invalid &&this.xxxArray.controls[index].get(field).touched;
    23
    }
    24
    25
    // 获取FormArray
    26
    get xxxArray(): FormArray {
    27
        return this.form.get('xxxArray') as FormArray;
    28
    }
    29
    30
    // 设置FormArray
    31
    set setXxxArray() {
    32
        // TODO
    33
    }
    34
    35
    // 表单提交
    36
    ensure() {
    37
        if (!this.form.valid) {
    38
            this.validateAllFormFields(this.form);
    39
            this.orderService.presentToast('表单信息不全, 请填写完整～');
    40
        } else {
    41
            // TODO
    42
        }
    43
    }

发表于 更新于
本文字数： 151 阅读时长 ≈ 1 分钟

最近写项目遇到接收后台数据（带格式的字符串），前端显示的时候，要保留其空格和换行符的问题，自己查找了半天，具体实现方式如下，希望能帮到其他也遇到同样问题的小伙伴吧。

1
// css保留空格和换行符
2
white-space: pre-wrap;
3
// css保留换行符
4
white-space: pre-line;

发表于 更新于
本文字数： 848 阅读时长 ≈ 1 分钟

  1. 給ngx-datatable设置css属性

    1
    /deep/ .ngx-datatable{
    2
        .sortable .sort-btn:before {
    3
            font-family: data-table;
    4
            content: "c";
    5
        }
    6
        .sortable .sort-btn.datatable-icon-down:before {
    7
            content: "f";
    8
        }
    9
        .sortable .sort-btn.datatable-icon-up:before {
    10
            content: "e";
    11
        }
    12
    }

  2. 如果某一列不需要排序，则可设置sortable为false

    1
    <ngx-datatable #datatable>
    2
        <ngx-datatable-column prop="name" name="name">
    3
            <ng-template let-row="row" let-value="value" ngx-datatable-cell-template [sortable]="false">
    4
                <span *ngIf="value">{{value}}</span>
    5
            </ng-template>
    6
        </ngx-datatable-column>
    7
    </<ngx-datatable>

  3. 检索条件重置的时候重置Icon和排序

    1
    @ViewChild('datatable') datatable: DatatableComponent;
    2
    this.datatable.sorts = [];

发表于 更新于
本文字数： 3.1k 阅读时长 ≈ 3 分钟

1、问题

在Angular应用程序中，我们在开发阶段经常要与后端服务器进行交互，由于前后端是分离的，这个时候我们前端要调用后端接口获取数据就会面临跨域的问题。

2、代理

1. 在解决跨域问题前，让我们先了解一下什么是代理？通常代理服务器就是充当我们应用程序和Internet之间的网关，它是客户端和服务器之间的中间服务器，通过客户端请求转发资源。

2. 在Angular中，我们经常在开发环境中使用代理。Angular使用的是webpack dev server在开发模式下（development environment）为应用程序提供服务。

3. 例如下图：我们前端的Angular应用程序运行在4200端口上，而后端服务器运行在3700端口，所有以/api开头的接口调用都会通过代理重定向到后端服务器，并且所有调用都reset到同一端口。
阅读全文 »