关于angularjs:Angular-管道

问题

在写流动治理详情的时候不晓得怎么用内置的日期管道，本人写了一个管道，同时在管道应用时遇到问题。

查看后发现 ActivityScalePipe 在新建时申明在了 Activity 模块中，而我想在 view 模块中应用，就又将管道申明在了 view 模块中，这样就导致了下面的问题。最开始想到的解决办法时在 view 不必申明管道，在 Activity 中 export ActivityScalePipe, 而后在 view 模块中引入 Activity 模块，后果导致产生循环，因为在 Activity 模块中曾经引入了 view 模块。起初间接将管道申明在 view 模块中，而后再 export 管道，问题解决。
但起初想到这样解决不太好，因为如果有其余模块须要用到这个管道，那么这个模块就须要引入整个 view 模块，显然这种写法并不合理，于是从新批改，将管道申明在 pipe 模块中，这样无论那个模块想应用管道都只须要引入 pipe 管道。起初查看其余管道也是应用这种写法。

通过这个过程对组件与模块之间关系和模块之间的关系有了更深的了解。
组件依赖于模块，存在于模块，组件若想成动运行，则必然是运行于某个模块之中。组件胜利运行的前提，是在模块中被胜利地实例化，模块可能胜利实例化某个组件的前提是模块领有组件想要的所有。
留神：管道只能被申明在一个模块中

管道

官网文档

简介

管道简略来说能够了解为一个对数据转化的货色，数据在管道一端流入，通过管道转化后以另一种模式在另一端流出。
管道应用 数据 | 管道名称
如: 日期管道名称为‘data’

<p>The hero's birthday is {{birthday | date}}</p>

管道串联

The chained hero's birthday is
{{birthday | date | uppercase}}

自定义管道

要把类标记为管道并提供配置元数据，请把 @Pipe 装璜器利用到这个类上
建设管道命令 ng g p 管道名称
管道示例

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({name: 'exponentialStrength'})
export class ExponentialStrengthPipe implements PipeTransform {transform(value: number, exponent = 1): string {if(valuev === 0){return '男';}else {return '女';}
}

如果是原始类型的输出值，比方 String 或 Number，或者是对象援用型的输出值，比方 Date 或 Array，那么每当 Angular 检测到输出值或援用有变动时，就会执行该输出管道。同样，数组和对象中的值变动时不能检测到。解决办法能够应用新的数组或对象代替原来的对象或数组。

检测复合对象中的非纯变更

要在复合对象外部进行更改后执行自定义管道（例如更改数组元素），就须要把管道定义为 impure 以检测非纯的变更。每当按键或鼠标挪动时，Angular 都会检测到一次变更，从而执行一个非纯管道。

@Pipe({
  name: 'flyingHeroesImpure',
  pure: false
})

当然，不倡议应用这种形式，这会大大降低效率。

从一个可察看对象中解包数据

应用内置的 AsyncPipe 承受一个可察看对象作为输出，并主动订阅输出。如果没有这个管道，你的组件代码就必须订阅这个可察看对象来应用它的值，提取已解析的值、把它们公开进行绑定，并在销毁这段可察看对象时勾销订阅，以避免内存透露。AsyncPipe 是一个非纯管道，能够节俭组件中的样板代码，以保护订阅，并在数据达到时继续从该可察看对象中提供值。

import {Component} from '@angular/core';

import {Observable, interval} from 'rxjs';
import {map, take} from 'rxjs/operators';

@Component({
  selector: 'app-hero-async-message',
  template: `
    <h2>Async Hero Message and AsyncPipe</h2>
    <p>Message: {{message$ | async}}</p>
    <button (click)="resend()">Resend</button>`,})
export class HeroAsyncMessageComponent {
  message$: Observable<string>;

  private messages = [
    'You are my hero!',
    'You are the best hero!',
    'Will you be my hero?'
  ];

  constructor() {this.message$ = this.getResendObservable();
  }

  resend() {this.message$ = this.getResendObservable();
  }

  private getResendObservable() {return interval(500).pipe(map(i => this.messages[i]),
      take(this.messages.length)
    );
  }
}

异步管道

有时咱们写的管道须要向后盾申请数据，这个时候就须要用到异步管道。
异步管道实际上是把返回值类型申明为 Observable，管道接管到输出值后，向后盾申请数据，申请到数据后通过 Observable 被动向外弹出值，并返回这个值，而后应用时通过下面的 AsyncPipe 主动订阅并接收数据。

transform(regionId: number): Observable<string> {
    this.observable = new Observable<string>(subscriber => {this.districtService.getDistrictByRegionId(regionId)
        .subscribe(district => {subscriber.next(distric);
          subscriber.complete();})
      return this.observable;
    }
  }

应用
{{数据 | 管道名 | async}}

Angular 内置管道

内置管道官网文档链接
DatePipe: 依据本地环境中的规定格式化日期值。
UpperCashPipe: 把文本全副转换成大写。
LowerCashPipe: 把文本全副转换成小写。
CurrencyPipe: 把数字转换成货币字符串，依据本地环境中的规定进行格式化。
DecimalPipe: 把数字转换成带小数点的字符串，依据本地环境中的规定进行格式化。
PercentPipe: 把数字转换成百分比字符串，依据本地环境中的规定进行格式化。

能够定义款式的管道

这种比拟非凡的管道能够间接返回 html 代码，能够在代码中申明款式

transform(input: boolean, ...args: unknown[]): SafeHtml {if (!isNotNullOrUndefined(input)){return '-';}
    let clazz = 'primary';
    let value = '是';
    if (!input) {
      clazz = 'info';
      value = '否'
    }
    return this.domSanitizer.bypassSecurityTrustHtml(`<span class="badge badge-${clazz}">${value}</span>`)
  }

应用

<td [innerHTML]="数据 | trueOrFalse"></td>

成果

总结

管道为咱们提供了一种不便的数据转换的形式，同时能够防止造反复的轮子, 须要留神在写管道时不要忘了对管道输出数据进行解决，使本人的代码更加强壮，同时不给队友挖坑。

说点别的

写代码的时候肯定要认真!
肯定要认真!
肯定要认真!
不然就是在坑队友！
十分道歉因为我的谬误坑了学长。

分享一个十分有意思的工具 pyautogui
能够用来模仿鼠标的点击和键盘输入等性能，能够用来写一些小的脚本。