angular学习（二）

时间：2020-08-14 17:31:27 收藏：0 阅读：56

数据双向绑定和管道

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];
  }

}

原文：https://www.cnblogs.com/jingyukeng/p/13502971.html