封面

angular2学习笔记之ng2标签

angular2的内值指令和angular2很类似,所有熟悉angular1的朋友看一眼就会了。angular2-demo

一、 效果图

一、指令解读

0. 组件

主要就是定义了一些数据用于测试

import {Component} from '@angular/core';

@Component({
selector: 'ng-tag',
styles: [require('./NgTag.scss')],
template: require('NgTag.html')
})

export class NgTagComponent {
list:any;
ngSwitchList:any;
ngStyleList:any;

constructor() {
this.list = [{
'name': 'xiaomo'
},{
'name': 'xiaogang'

},{
'name': 'xiaomoxue'
}];
this.ngSwitchList=[
'xiaomo',
'xiaoming'
];
this.ngStyleList={
'color':'blue',
'backgroundColor':'green'
};
};
}

1. ngFor

<ul class="list-group" *ngFor="let item of list">
<li class="list-group-item">{{item.name}}</li>
</ul>

效果图

2. ngIf

我在组件中定义了一个list

this.list = [{
'name': 'xiaomo'
},{
'name': 'xiaogang'

},{
'name': 'xiaomoxue'
}];

我在循环这个数组对象的时候去比对item.name 如果是 xiaomo,就 出现 ngIf中的内容

<ul *ngFor="let item of list">
<li *ngIf="item.name=='xiaomo'" class="list-group-item">哇,我在list列表中找到了 <span class="label label-info">{{item.name}}</span></li>
</ul>

效果图

3. ngSwitch

我在组件中定义了一个方法,可以设置选中的值给myVal

myVal:number = 0;
changeValue($event):void{
console.log($event.target.value);// 输出选中的值设给myVal
this.myVal = $event.target.value;
}

有一组单选按钮,选中是myVal会改变,ngSwitch会去循环每个case,如果找到了就显示那条case中的数据,不然显示default中的数据

<div>
<h2>ngSwitch</h2>
<input name="myVal" type="radio" title="" value="1" (click)="changeValue($event)">1
<input name="myVal" type="radio" title="" value="2" (click)="changeValue($event)">2
<input name="myVal" type="radio" title="" value="3" (click)="changeValue($event)">3
<input name="myVal" type="radio" title="" value="4" (click)="changeValue($event)">4
<input name="myVal" type="radio" title="" value="5" (click)="changeValue($event)">5
<hr>
<span [ngSwitch]="myVal">
<span *ngSwitchCase="'1'">ONE</span>
<span *ngSwitchCase="'2'">TWO</span>
<span *ngSwitchCase="'3'">THREE</span>
<span *ngSwitchCase="'4'">FOUR</span>
<span *ngSwitchCase="'5'">FIVE</span>
<span *ngSwitchDefault>other</span>
</span>
</div>

效果图

4. ngStyle

这里的样式的值都是从组件中取出来的,也就意味着它可以动态,不过建议是封装成class,也就是ngClass

<div [ngStyle]="{'background-color': ngStyleList.backgroundColor,'color':ngStyleList.color}" [style.font-size]="30">
背景 :{{ngStyleList.backgroundColor}} <br/>
字体颜色: {{ngStyleList.color}}
</div>

效果图

5. ngClass

左边是class名[要用‘’包起来],右边是一个true|false表达式或者是一个方法

在组件中定义了一个fn() 返回封装好的样式

this.ngStyleList={
'color':'blue',
'backgroundColor':'green'
};

classes:any={};
fn():any {
return this.classes = {
'btn-primary':true
};
}

模板中有两个button,我们给他加上样式。至于加什么样式 我们可以用函数控制

<button class="btn" [ngClass]="{'btn-danger': ngStyleList}">测试</button>
<button class="btn" [ngClass]="fn()">fn</button>

效果图

文章目录
  1. 1. 一、 效果图
  2. 2. 一、指令解读
    1. 2.1. 0. 组件
    2. 2.2. 1. ngFor
    3. 2.3. 2. ngIf
    4. 2.4. 3. ngSwitch
    5. 2.5. 4. ngStyle
    6. 2.6. 5. ngClass
twitter分享
Fork me on GitHub