angular2-指令

常见数据操作

1 插值表达式

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template:`
    
{{title}}
    
我喜欢的地方: {{mySite}}
    `
})
export class AppComponent {
  title = '标题';
  mySite = '江南';
}

2 数组循环

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    
{{teacher}}
    
优秀讲师:
    

      

        {{list}}
      
    
    `
})
export class AppComponent{
  title = '特级教师';
  teacherList = ['张老师', '李老师', '王老师', '安老师'];
}

3 数组嵌套对象

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    
{{teacher}}
    
优秀讲师:
    

      

        

            {{list.name}}
            教龄:{{list.age}}
        

      
    
    `
})
 
export class AppComponent{
  title = '特级教师';
  teacherList = [
    {
        name:"张老师",
        age:"12"
    },
    {
        name:"王老师",
        age:"18"
    },
    {
        name:"成老师",
        age:"22"
    }
  ];
}

4 获取索引值

import { Component } from '@angular/core';
@Component({
 selector: 'my-app',
 template: `
   
{{teacher}}
   
优秀讲师:
   

     

       

           {{idx}}
           {{list.name}}
           教龄:{{list.age}}
       

     
   
   `
})

export class AppComponent{
 title = '特级教师';
 teacherList = [
   {
       name:"张老师",
       age:"12"
   },{
       name:"王老师",
       age:"18"
   },{
       name:"成老师",
       age:"22"
   },{
       name:"战老师",
       age:"27"
   }
 ];
}

5 条件判断显示

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    
{{teacher}}
    
优秀讲师:
    

      

        

            {{idx}}
            {{list.name}}
            教龄:{{list.age}}
        

        
特级教师有点多
      
    
    `
})
 
export class AppComponent{
  title = '特级教师';
  teacherList = [
    {
        name:"张老师",
        age:"12"
    },
    {
        name:"王老师",
        age:"18"
    },
    {
        name:"成老师",
        age:"22"
    },
    {
        name:"战老师",
        age:"27"
    }
  ];
}

事件的相关绑定

1 点击事件

import { Component } from '@angular/core';
@Component({
  selector: 'mny-click',
  template: `
    点击事件
    {{clickMessage}}`
})
export class ClickMeComponent {
  clickMessage = '';
 
  onClickMe() {
    this.clickMessage = 'hello Word!';
  }
}

2 通过$event对象获取输入的相关值

import { Component } from '@angular/core';
@Component({
  selector: 'mny-click',
  template: `
    
    
{{values}}
    `
})
export class ClickMeComponent {
 
  values = '';
 
  /*
  // 非强类型
  onKey(event:any) {
    this.values += event.target.value + ' | ';
  }
  */
  // 强类型
  onKey(event: KeyboardEvent) {
    this.values += (event.target).value + ' | ';
  }
}

3 失去焦点事件

@Component({
  selector: 'key-up4',
  template: `
    
      
{{values}}
    `
})
export class KeyUpComponent_v4 {
  values = '';
}

4 动态添加类(css)

@Component({
  selector: 'key-up4',
  template: `
    

    

      
{{values}}
    `
})
export class KeyUpComponent_v4 {
  number = 30;
  age = 30
}

5 阻止事件冒泡

@Component({
  selector: 'key-up4',
  template: `
    
    `
})
//注意！ 使用tap来进行事件对点击，则上面对点击事件不会起效果