接着第二部分，这部分介绍常见angular指令使用
1. 在父页面文件中添加组件（通过ng命令生成的component）
其中messages，为组件名。
2. Angular 绑定数据
- （1）数据文本绑定
定义数据几种方式：
public共有（默认） 可以在类里外使用protected保护类型 只能在当前类和子类中使用private私有类型 只能在当期类使用
html文件中变量绑定：
{ {title}}
- （2）绑定
HTML
ts文件中定义文本：
this.h="这是一个 h2 用[innerHTML]来解析
"
绑定方法：
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文件中使用如下：
- { {item.name}}- { {item.age}}
循环的时候设置 key
html文件中使用如下：
- { {item}} --{ {i}}
template 循环数据
- { {item}}
4. 条件判断 *ngIf
这是 ngIF 判断是否显示
这是 ngIF 判断是否显示
5. *ngSwitch
- 已支付
- 订单已经确认
- 已发货
- 无效
6. 执行事件 (click)=”getData()”
html:
ts:
getData(){ /*自定义方法获取数据*/ //获取 alert(this.msg);} setData(){ //设置值 this.msg='这是设置的值';}
7. 表单事件
html:
ts:
keyUpFn(e){ console.log(e)}
8. 双向数据绑定
注：需要引入FormsModule
9. [ngClass]、[ngStyle]
[ngClass]:
示例1：
这是一个 div
ts:
public flag=false;
html:
这是一个 div
示例2：
ts:
public arr = [1, 3, 4, 5, 6];
html:
- { {item}}
[ngStyle]:
你好 ngStyle
示例：
ts:
public attr='red';
html:
你好 ngStyle
10. 管道
ts:
public today=new Date();
html:
{
{today | date:'yyyy-MM-dd HH:mm:ss' }}
常用的管道（pipe）有:
大写：uppercase
小写：lowercase 日期格式：date:'yyyy-MM-dd HH:mm:ss' 小数位数：number:'1.2-4' 注：{最少整数位数}.{最少小数位数}-{最多小数位数} js对象序列化：
{
{ { name: 'semlinker' } | json }}
slice：
{
{ 'semlinker' | slice:0:3 }}
管道链：
{
{ 'semlinker' | slice:0:3 | uppercase }}
自定义管道：
自定义管道的步骤：
- 使用
@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 使用
{
{ 'semlinker' | welcome }}{
{ 'semlinker' | welcome }}
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 使用
{
{ 'lo' | repeat:3 }}{
{ 'lo' | repeat:3 }}