Angular 学习笔记 (四） - Directive和Pipe

Directive

参考博客：https://segmentfault.com/a/1190000014704723

在Angular2中有三种类型的指令（Directive） ，如下：
1. 属性型指令 - 改变元素显示和行为的指令。例如：NgStyle, NgClass …
2. 结构型指令 － 通过添加和移除DOM元素来改变DOM结构的指令。例如：NgFor, NgIf, NgSwitch …
3. 组件 — 拥有模板的指令

 

一. Attribute Directives

 

 NgClass

利用NgClass指令，可以同时添加或移除多个类。NgClass绑定一个有形如CSS类名:value的对象，其中value的值是一个布尔型的值，当value值为true时，添加对应类型的模板元素，反之则移除。

 <div [ngClass]="{bordered: false}">此时div不包含bordered 类名</div>
 <div [ngClass]="{bordered: true}">此时div含有bordered 类名</div>

 NgStyle

绑定一个有形如CSS属性名:value的对象，其中value为具体的css样式，eg：

<div [ngStyle]="{color: 'white','background-color':'green'}"></<div>
<span [ngStyle]="{color: color}">{{ color }} text</span>

 

二. Structural Directives

NgIf

ngIf指令在DOM中添加或移除HTML元素，基于表达式的值。如果表达式的计算结果为true，则插入元素DOM。否则，元素将从DOM中移除

[hidden]作为否定判断，有时可以代替NgIf

<p *ngIf="name === 'Boothstomper'">{{name}} hero works!</p>
<p [hidden]="name !== 'Boothstomper'">{{name}} hero works!</p>

NgFor

用于迭代一个含有Iterator的元素

假设定义了这样一个类：

export class Ingredient {
  constructor(public name: string, public amount: number) {}
}

在appComponent中ts代码：

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

import { Ingredient } from '../shared/ingredient.model';

@Component({
  selector: 'app-shopping-list',
  templateUrl: './shopping-list.component.html',
  styleUrls: ['./shopping-list.component.css']
})
export class ShoppingListComponent implements OnInit {
  ingredients: Ingredient[] = [
    new Ingredient('Apples', 5),
    new Ingredient('Tomatoes', 10),
  ];

  constructor() { }

  ngOnInit() {
  }

  onIngredientAdded(ingredient: Ingredient) {
    if (this.ingredients.length < 5) {
      this.ingredients.push(ingredient);
    } 
  }

  onIngredientCleared() {
    this.ingredients.splice(0, this.ingredients.length);
  }
}

NgFor的使用：

<a
    class="list-group-item"
    style="cursor: pointer"
    *ngFor="let ingredient of ingredients">
     {{ ingredient.name }} ({{ ingredient.amount | currency }})
</a>

NgSwitch

 

•ngSwitchCase

•ngSwitchDefault

示例：

<div [ngSwitch]="ingredient.name">
   <p *ngSwitchCase="'Apples'">Discount 20%!</p>
   <p *ngSwitchCase="'Oranges'">Discount 15%!</p>
   <p *ngSwitchDefault>NoDiscount</p>
　　
　　{{ ingredient.name }} ({{ ingredient.amount | currency }})

</div>

 

三. 自定义Directives

示例：添加一个Directive用于在网页中插入版权Copyright信息。并在外部支持一个选项选择是否总是显示

新建copyright.directive.ts

import { Directive, ElementRef, OnInit, Renderer2, HostListener, HostBinding, Input } from '@angular/core';

@Directive({
    selector:'[appCopyright]'
})

export class CopyrightDirective implements OnInit {

    @Input() alwaysShow: boolean = false;

    constructor(private elementRef: ElementRef, private renderer: Renderer2) {
        
    }

    ngOnInit() {
        this.elementRef.nativeElement.innerText = '©Copyright: ' + this.elementRef.nativeElement.innerText;
        this.elementRef.nativeElement.style.fontSize = '10px';
        this.elementRef.nativeElement.style.float = 'right';
        if (this.alwaysShow){
            this.fontColor = 'black';
        }
    }

    @HostBinding('style.color') fontColor: string = 'transparent';

    @HostListener('mouseenter') mouseEnter(eventData: Event) {
        this.fontColor = 'black';
    }

    @HostListener('mouseleave') mouseleave(eventData: Event) {
        if (!this.alwaysShow){
            this.fontColor = 'transparent';
        }
    }
}

使用这个Directive，需要在app.module.ts中加入依赖：

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    RecipesComponent,
    RecipeListComponent,
    RecipeDetailComponent,
    RecipeItemComponent,
    ShoppingListComponent,
    ShoppingEditComponent,
    CopyrightDirective，
    ShowIfDirective,
    DropdownDirective,
    ShopItemPipe,
    FilterPipe
  ],
  imports: [
    BrowserModule,
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在html template中使用：

<p appCopyright [alwaysShow]="false">Aspirant</p>

 

PIPE

参考博客：https://blog.csdn.net/xnh_565175944/article/details/82115710

管道，简单来说，管道的作用就是传输。并且不同的管道具有不同的作用。(其实就是处理数据)

 

四. 常见的Pipe

DatePipe

日期管道，格式化日期

JsonPipe

将输入数据对象经过JSON.stringify()方法转换后输出对象的字符串

UpperCasePipe

将文本所有小写字母转换成大写字母

LowerCasePipe

将文本所有大写字母转换成小写字母

DecimalPipe

将数值按照特定的格式显示文本

CurrentcyPipe

将数值进行货币格式化处理

SlicePipe

将数组或者字符串裁剪成新子集

PercentPipe

将数值转百分比格式

 

使用方法示例：

person.name | uppercase

官方支持的Pipe从这里可以详细查阅：https://angular.io/api?type=pipe

 

五. 自定义Pipe

示例：添加一个Pipe为搜索输入框添加filter

import {Pipe, PipeTransform} from '@angular/core';
import { Ingredient } from './ingredient.model';

@Pipe({
    name: 'filter'
})
export class FilterPipe implements PipeTransform {

    transform(value:Array<Ingredient>, filterString:string, propName:string): any {
        if (value.length === 0) {
            return value;
        }
        const resultArray = [];
        for(const item of value) {
            if (item.name.includes(filterString)) {
                resultArray.push(item);
            }
        }
        return resultArray;
    }

}   

这里同样要在app.module.ts中添加依赖

这里所传参数，filterString在html template中使用示例如下：

<div class="list-temp" *appShowIf="true">
      <input type="text" [(ngModel)]="filteredItems">
      <div *ngFor="let ingredient of ingredients | filter:filteredItems:'filterString'">
        <p>{{ingredient}}</p>
      </div>
</div>

 

六. Pure Pipe和Impure Pipe

在app中有个添加按钮添加shopItem，但是可以发现添加的项目并不会自动添加到filter的过滤中。

 

这是因为默认pure的值为true，对于pure pipe，则在html中独立，不会收到以外元素的影响。

可以在filter.pipe.ts中设置pure值为false。设置以后，可以看到新add的项目自动添加到过滤后的列表中。

import {Pipe, PipeTransform} from '@angular/core';
import { Ingredient } from './ingredient.model';

@Pipe({
    name: 'filter',
    pure: false,
})
export class FilterPipe implements PipeTransform {

    transform(value:Array<Ingredient>, filterString:string, propName:string): any {
        if (value.length === 0) {
            return value;
        }
        const resultArray = [];
        for(const item of value) {
            if (item.name.includes(filterString)) {
                resultArray.push(item);
            }
        }
        return resultArray;
    }

}