Angular7.1.4+Typescript3.1框架学习（三）

接着第二部分，这部分介绍常见angular指令使用

1. 在父页面文件中添加组件（通过ng命令生成的component）

  <app-messages></app-messages>

其中messages，为组件名。

2. Angular 绑定数据

• （1）数据文本绑定

定义数据几种方式：

• public 共有（默认） 可以在类里外使用
• protected 保护类型 只能在当前类和子类中使用
• private 私有类型 只能在当期类使用

html文件中变量绑定：

   <h1>{{title}}</h1>

• （2）绑定HTML

ts文件中定义文本：

this.h="<h2>这是一个 h2 用[innerHTML]来解析</h2>"

　　绑定方法：

<div [innerHTML]="h"></div>

　　h为ts中定义的变量，引用的时候将属性用[]包裹

3. 数据循环 *ngFor

1) ts文件中定义数组：

export class xxxxxxxxxxxx implements OnInit {

  arr = [{ name: 'poetries', age: 22 }, { name: 'jing' , age: 31}];
  constructor() { }

  ngOnInit() {
  }

}

　2)   使用

     ngFor 普通循环

html文件中使用如下：

<ul *ngIf="arr.length>0">
      <li *ngFor="let item of arr">{{item.name}}- {{item.age}}</li>
</ul>

　循环的时候设置 key

     html文件中使用如下：

<ul>
   <li *ngFor="let item of list;let i = index;"> <!-- 把索引index赋给i -->
        {{item}} --{{i}}
   </li>
</ul>

　template 循环数据

<ul>
    <li template="ngFor let item of list">
       {{item}}
     </li>
 </ul>

4. 条件判断 *ngIf

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

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

　　

5. *ngSwitch

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

　　

6. 执行事件 (click)=”getData()”

html:

<button class="button" (click)="getData()"> 点击按钮触发事件
</button>
<button class="button" (click)="setData()"> 点击按钮设置数据
</button>

ts:

getData(){ /*自定义方法获取数据*/ //获取
  alert(this.msg);
}
setData(){
    //设置值
    this.msg='这是设置的值';
}

　　

7. 表单事件

html:

<input
type="text"
(keyup)="keyUpFn($event)"/>

<input type="text" (keyup)="keyUpFn($event)"/>

ts:

keyUpFn(e){
    console.log(e)
}

　　

8. 双向数据绑定

<input [(ngModel)]="inputVal">

　　注：需要引入FormsModule

9. [ngClass]、[ngStyle]

 [ngClass]:

示例1：

<div [ngClass]="{'red': true, 'blue': false}">
    这是一个 div
</div>

ts:

public flag=false;　

html:

<div [ngClass]="{'red': flag, 'blue': !flag}">
    这是一个 div
</div>

示例2：

ts:

public arr = [1, 3, 4, 5, 6];

html:

<ul>
<li *ngFor="let item of arr, let i = index"> <span [ngClass]="{'red': i==0}">{{item}}</span>
</li> </ul>

[ngStyle]:

<div [ngStyle]="{'background-color':'green'}">你好 ngStyle</div>

示例：

ts:

public attr='red';

html:

<div [ngStyle]="{'background-color':attr}">你好 ngStyle</div>

10. 管道

ts:

 public today=new Date();

html:

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

常用的管道（pipe）有:

大写：uppercase

小写：lowercase

日期格式：date:'yyyy-MM-dd HH:mm:ss' 

小数位数：number:'1.2-4'  注：{最少整数位数}.{最少小数位数}-{最多小数位数}

js对象序列化：

<p>
    {{ { name: 'semlinker' } | json }}
</p>

　slice：

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

　管道链：

<p>
{{ 'semlinker' | slice:0:3 | uppercase }}
</p> 

<!-- Output: SEM -->

　自定义管道：

自定义管道的步骤：

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

1）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;
  }
}

　　2）WelcomePipe 使用

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

　　3）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);
    }
}

　　4）RepeatPipe 使用

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