zoukankan      html  css  js  c++  java
  • [Angular 2] Understanding Pure & Impure pipe

    First, how to use a build in pipe:

                <div class="pipe-example">
                    <label>Uppercase Pipe: {{ message | uppercase }}</label>
                </div>
                
                <div class="pipe-example">
                    <label>Lowercase Pipe: {{ message | lowercase }}</label>
                </div>            
    
                <div class="pipe-example">
                    <label>Slice Pipe: {{ message | slice:0:5 }}</label>
                </div>                       
    
                <div class="pipe-example">
                    <label>Date Pipe: {{ date | date:'yyyy-MMM-dd' }}</label>
                </div>
    
                <div class="pipe-example">
                    <label>Number Formatting: {{ pi | number:'5.1-2' }}</label>
                </div>            
    
                <div class="pipe-example">
                    <label>Percent Pipe: {{ percentage | percent:'2.1-2' }}</label>
                </div>                  
    
                <div class="pipe-example">
                    <label>Currency Pipe: {{ amount | currency:'USD':true:'2.1-2' }}</label>
                </div>                         

    Then how to create a custom pipe:

    import { Pipe, PipeTransform } from '@angular/core';
    
    @Pipe({
        name: 'sort'
    })
    export class SortPipe implements PipeTransform {
        transform(value: any[], args): any[] {
    
            let sorted = [
                ...value
            ].sort();
    
            if(args.length > 0 && args === "DESC"){
                sorted = sorted.reverse();
            }
    
            return sorted;
        }
    }

    Notice here, we use:

    let sorted = [
                ...value
            ].sort();

    The reason doing this is because sort() is mutate opreation, once you apply sort(), it will mutate the original data, which is not good. So here we create a copy of data and apply sort() fucntion to enhance immutatbility. 

    Pure and Impure:

    See example at: https://angular.io/resources/live-examples/pipes/ts/plnkr.html

    Pure pipe it means:  

    It won't go thought Angular Change Detection if the primitive type reference doesn't change.

        if (this.mutate) {
        // Pure pipe won't update display because heroes array reference is unchanged
        // Impure pipe will display
        this.heroes.push(hero);
        } else {
          // Pipe updates display because heroes array is a new object
          this.heroes = this.heroes.concat(hero);
        }

    So if 'this.mutate' is ture, then we mutate this.heros array, so primitive type (array) reference is changed. So this will trigger change detection. So that, everytime you add a hero into the this.hero, piped result will update.

    If this.mutate is false, then reference won't change, therefore,  if you add new hero, even set 'can fly' tag to ture, it won't update the piped result.

    Impure pipe: 

    Angular executes an impure pipe during every component change detection cycle. An impure pipe will be called a lot, as often as every keystroke or mouse-move.

    To set pure or impure you just need to add a pure flag:

    @Pipe({
        name: 'sort',
        pure: true //false
    })

    Default is ture.

    So when build a custom pipe, you need to decide whether it should be pure or impure.

  • 相关阅读:
    子网掩码
    linux中grep工具
    C#尝试读取或写入受保护的内存。这通常指示其他内存已损坏。
    c#常用的Datable转换为json,以及json转换为DataTable操作方法
    easyui-从数据库读取创建无极菜单
    wpf 进度条 下拉
    进度条与执行过程
    属性表格 datagridproperty
    Jquery easyui开启行编辑模式增删改操作
    asp.net (jquery easy-ui datagrid)通用Excel文件导出(NPOI)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5883734.html
Copyright © 2011-2022 走看看