接着第二部分，这部分介绍常见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>