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

  
{{item.name}}

效果图

2. ngIf

我在组件中定义了一个list

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

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

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

哇,我在list列表中找到了 {{item.name}}

效果图

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中的数据

    
ngSwitch
        1
        2
        3
        4
        5
        

       
          ONE
          TWO
          THREE
          FOUR
          FIVE
          other
        

效果图

4. ngStyle

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

      背景 :{{ngStyleList.backgroundColor}} 

      字体颜色: {{ngStyleList.color}}
  

效果图

5. ngClass

左边是class名[要用''包起来]，右边是一个true|false表达式

   测试

效果图