angular学习（二）

数据双向绑定和管道

NgModules 用于配置注入器和编译器，并帮你把那些相关的东西组织在一起。NgModule 是一个带有 @NgModules 装饰器的类。用来实现数据双向绑定

<div>
    <label for="">用户名</label>
    <input type="text" [(ngModel)]="username">

    <label for="">密码</label>
    <input type="text" [(ngModel)]="password">
    <button (click)=clickfn()>登录</button>
</div>
<h1 >{{username}}</h1>

管道

管道可以说是angular里面比较好用的数据转换和格式化工具。

Angular 为典型的数据转换提供了内置的管道，包括国际化的转换（i18n），它使用本地化信息来格式化数据。数据格式化常用的内置管道如下：

• DatePipe：根据本地环境中的规则格式化日期值。

• UpperCasePipe：把文本全部转换成大写。

• LowerCasePipe ：把文本全部转换成小写。

• CurrencyPipe ：把数字转换成货币字符串，根据本地环境中的规则进行格式化。

• DecimalPipe：把数字转换成带小数点的字符串，根据本地环境中的规则进行格式化。

• PercentPipe ：把数字转换成百分比字符串，根据本地环境中的规则进行格式化。

      

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

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

@Component({
  selector: 'app-hero-birthday',
  template: `<p>The hero's birthday is {{ birthday | date }}</p>`
})
export class HeroBirthdayComponent {
  birthday = new Date(1988, 3, 15); // April 15, 1988 -- since month parameter is zero-based
}

自定义管道

<h1>{{msg| lcupcase:'元'}}</h1>

创建filter:

ng g pipe 名字/目录

 

 实现如下接口：

export class LcupcasePipe implements PipeTransform {

  transform(value:string, ...args:string[]):string{
   console.log(value);
    return '$'+value+args[0];
  }

}