Angular学习四-事件

1. 定义数据

1. pravite    私有的，只有类本身才能访问
2. public     公有的, 类里面使用、也可以在类外面使用
3. protected  保护类型，他只有在当前类和它的子类里面可以访问

2.绑定属性

用[]包裹 , <div [id]="id" [title]="msg">调试工具看看我的属性</div>

2.Angular事件

1. 点击事件<div ng-click="xxx()"></div> | <div (click)="xxx()"></div>

2. 隐藏元素<div ng-hide="xxx"></div>

3. 循环数据<div *ngFor="let item of DataList">{{item.id}}</div>

4. 循环数据-设置Key<div *ngFor="let item of DataList let i = idnex">{{item.id}}</div>

5. Template--循环数据<div template="ngFor let item of list"></div>

6. 条件判断 *ngIf <p *ngIf="list.length > 3">这是 ngIF 判断是否显示</p> |<p template="ngIf list.length > 3">这是 ngIF 判断是否显示</p>

7. *ngSwitch <ul [ngSwitch]="score"><li *ngSwitchCase="1">已支付</li><li *ngSwitchCase="2">订单已经确认</li> <li *ngSwitchCase="3">已发货</li><li *ngSwitchDefault>无效</li></ul>

8. 表单事件:<inputtype="text"(keyup)="keyUpFn($event)"/><input type="text" (keyup)="keyUpFn($event)"/>keyUpFn(e){ console.log(e)}

9. 双向数据绑定: <input [(ngModel)]="inputVal"> 注意引入import {FormsModule} from '@angular/forms' imports:[FormsModule]进行注册下

10. [ngClass]、[ngStyle]

    1. <div [ngClass]="{'red': true, 'blue': false}"> 这是一个 div</div>
    2. public flag=false;
    3. <div [ngClass]="{'red': flag, 'blue': !flag}">这是一个 div </div>
    4. public arr = [1, 3, 4, 5, 6];
    5. <ul><li *ngFor="let item of arr, let i = index"> <span [ngClass]="{'red': i==0}">{{item}}</span></li> </ul>

11. [ngStyle]:

    1. <div [ngStyle]="{'background-color':'green'}">你好 ngStyle</div> 2.public attr='red';
    2. <div [ngStyle]="{'background-color':attr}">你好 ngStyle</div>

12. 管道 public today=new Date(); , <p>{{today | date:'yyyy-MM-dd HH:mm:ss' }}</p>

angular中的管道(pipe)是用来对输入的数据进行处理，如大小写转换、数值和日期格式化等 angular中的管道(pipe) 以及自定义管道适用于angular4 angualr5 angualr6 angular7

3.大小写转换

<!--转换成大写--><p>{{str | uppercase}}</p><!--转换成小写--><p>{{str | lowercase}}</p>

4. 日期格式转换

<p>{{today | date:'yyyy-MM-dd HH:mm:ss' }}</p>

5.小数位数

接收的参数格式为{最少整数位数}.{最少小数位数}-{最多小数位数}<!--保留2~4位小数--><p>{{p | number:'1.2-4'}}</p>

6. JavaScript 对象序列化

<p> {{ { name: 'semlinker' } | json }}</p> <!-- Output: { "name": "semlinker" } -->

7. slice

<p>{{ 'semlinker' | slice:0:3 }}</p> <!-- Output: sem -->

8. 管道链

<p>{{ 'semlinker' | slice:0:3 | uppercase }}</p> <!-- Output: SEM -->

9. 自定义管道

自定义管道的步骤： 使用 @Pipe 装饰器定义 Pipe 的 metadata 信息，如 Pipe 的名称 - 即 name 属性 实现 PipeTransform 接口中定义的 transform 方法

10. WelcomePipe 定义

import { Pipe, PipeTransform } from '@angular/core'; [@Pipe](/user/Pipe)({ name: 'welcome' })export class WelcomePipe implements PipeTransform { transform(value: string): string { if(!value) return value; if(typeof value !== 'string') { throw new Error('Invalid pipe argument for WelcomePipe'); } return "Welcome to " + value; }}

11.WelcomePipe 使用

<div> <p ngNonBindable>{{ 'semlinker' | welcome }}</p> <p>{{ 'semlinker' | welcome }}</p> <!-- Output: Welcome to semlinker --></div>

12.RepeatPipe 定义

import {Pipe, PipeTransform} from '@angular/core';[@Pipe](/user/Pipe)({name: 'repeat'})export class RepeatPipe implements PipeTransform { transform(value: any, times: number) { return value.repeat(times); }}

13.RepeatPipe 使用

<div> <p ngNonBindable> {{ 'lo' | repeat:3 }} </p> <p> {{ 'lo' |repeat:3 }} </p> <!-- Output: lololo --></div>