组件中的模板

组件中的模板

引入图片

引入静态资源图片

在静态资源文件夹assets创建文件夹images，将要引入的图片放置在assets/images文件夹中

在html中引入图片

<img src="assets/images/Koala.jpg" alt="考拉" />

加载ts中引入的其他网站图片

在ts中定义图片路径变量

public picUrl:string = 'https://dss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/super/crop=0,0,1280,800/sign=4c135e228c8ba61ecba1926f7c04bb3a/4a36acaf2edda3cc81ffe0c80fe93901213f923b.jpg';

在html中引入该变量
```
<img [src]="picUrl" alt="背景图" />
```

条件判断

对ts中的布尔变量做判断

在ts中定义boolean类型的变量
```
public picFlag:boolean = true;
```

在html使用 ng-if 进行判断

<!-- 当picFlag为true时展示 -->
<div *ngIf="picFlag">
<img src="assets/images/Koala.jpg" />
</div>
<!-- 当picFlag为false时展示 -->
<div *ngIf="!picFlag">
<img src="assets/images/Lighthouse.jpg">
</div>

对表达式做判断

在ts中定义数组

public cars:any[] = [{
title: '第一个新闻',
desc: 'aaa'
},{
title: '第二个新闻',
desc: 'bbb'
},{
title: '第三个新闻',
desc: 'ccc'
}];

在css文件中定义一个红色class
```
.red{
color: red;
}
```

在html中遍历数组，对下标为1的值标记为红色

<ul>
<li *ngFor="let item of cars; let key = index">
    <span *ngIf="key == 1" class="red"> {{key}} : {{item.title}}</span>
    <span *ngIf="key != 1"> {{key}} : {{item.title}}</span>
</li>
</ul>

switch-case语句

在ts中定义一个变量
```
public orderStatus:number = 1;
```

在html中使用switch-case对orderStatus进行判断

快捷方式 ng-switch

<span [ngSwitch]="orderStatus">
    <p *ngSwitchCase="1">
        已支付
    </p>
    <p *ngSwitchCase="2">
        已确认订单
    </p>
    <p *ngSwitchCase="3">
        已发货
    </p>
    <p *ngSwitchCase="4">
        已确认收货
    </p>
    <p *ngSwitchDefault>
        无效状态
    </p>
</span>

ngClass的使用

使用ngClass定义要使用的样式

在css文件中定义相关样式 ```css .red { color: red; }

.blue { color: blue; }

.orange { color: orange; }


2.  在html中使用ngClass决定要使用的class样式 
```html
<div>
    <!-- 使用class='red'样式，不使用class='blue'样式 -->
    <span [ngClass]="{'red': true, 'blue': false}">
        ngClass测试
    </span>
</div>

使用ngClass获取ts中的boolean变量改变样式

在ts中定义boolean类型变量
```
public colorFlag:boolean = false;
```

在html中获取colorFlag的值

<div>
<!-- colorFlag为true时,class='red';colorFlag为false时,class='blue' -->
<span [ngClass]="{'red': colorFlag, 'blue': !colorFlag}">
    ngClass测试
</span>
</div>

获取ts中的object变量改变样式

类似绑定数据到html属性

在ts中定义object类型变量

public classDefine:object = {
'orange':true,
'blue':false
}

在html中将获取ts变量 ```html
ngClass测试

ngClass测试


<a name="c1515907"></a>
### 使用class进行样式判断
当hero对象等于选中的selectedHero对象时，class为.selected
```html
<li  [class.selected]="hero === selectedHero"></li>

ngStyle的使用

使用ngStyle定义一个普通样式

<p [ngStyle]="{'color': 'red'}">
    测试ngStyle
</p>
<!-- 等同于下面 -->
<p style="color: red">
    测试ngStyle
</p>

使用ngStyle引入ts中的样式变量

在ts中定义样式变量
```
public styleColor:string = 'red';
```

在html中引入该样式变量

<p [ngStyle]="'color' : styleColor">
测试ngStyle
</p>

管道

在ts中定义一个日期变量
```
public today = new Date();
```

在html中直接引入，并加入管道对日期格式化 ```html
{{today}}


3.  Angular内置了一些管道，比如DatePipe、UpperCasePipe、LowerCasePipe、CurrencyPipe、PercentPipe。也可以自定义管道。多个管道也可以串联使用。 
<a name="9402944a"></a>
## 绑定事件
1.  在html中绑定事件 
```html
<button (click)='runTest()'>
    测试方法
</button>

在ts中添加runTest方法
```
runTest():void {
alert('测试方法');
}
```

绑定keyDown事件
```
<input (keydown)='keydown=($event)' />
```

在ts中添加keydown方法

keydown(e):void {
console.log(e);
// e.keyCode获取按下的键值
// e.target获取当前dom节点，即input框
// 此处的dom变量必须声明为any类型，否则会报错
let dom:any = e.target;
dom.style.color = red;
// e.target.value获取input框的value
}

双向数据绑定MVVM

前端修改的数据，绑定的后台变量会跟着修改；（M到V)

后台变量修改，前台绑定的模板跟着修改；(V到M)

双向数据绑定只能作用于表单

在app.module.ts中引入FormsModule模块 ```typescript // ….. // 引入FormsModule模块 import {FormsModule} from ‘@angular/forms’; //…..

@NgModule({ declarations: [ AppComponent // …… ], imports: [ BrowserModule, // 在此处加入FormsModule模块 FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }


2.  在html中使用ngModel实现双向绑定 
```html
<p>
    MVVM测试
</p>
<!-- 改变该输入框的值，绑定的后台title的值也会跟着改变 -->
<input [(ngModel)]="title" />
<br>
<!-- 实时显示后台title变量的值 -->
{{title}}
<br>
<button (click)='updateTitle()'>更新title</button>

在ts中定义title变量

public title:string = '原来的title';
updateTitle():void{
this.title = '修改后的title';
}

前端笔记

06-组件中的模板合成（下）