angular2-指令

常见数据操作

1 插值表达式

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

2 数组循环

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <h1>{{teacher}}</h1>
    <p>优秀讲师:</p>
    <ul>
      <li *ngFor="let list of teacherList">
        {{list}}
      </li>
    </ul>
    `
})
export class AppComponent{
  title = '特级教师';
  teacherList = ['张老师', '李老师', '王老师', '安老师'];
}

3 数组嵌套对象

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <h1>{{teacher}}</h1>
    <p>优秀讲师:</p>
    <ul>
      <li *ngFor="let list of teacherList">
        <div>
            <span>{{list.name}}</span>
            <span>教龄:{{list.age}}</span>
        <div>
      </li>
    </ul>
    `
})
 
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: `
   <h1>{{teacher}}</h1>
   <p>优秀讲师:</p>
   <ul>
     <li *ngFor="let list of teacherList;let idx=index"">
       <div>
           <span>{{idx}}</span>
           <span>{{list.name}}</span>
           <span>教龄:{{list.age}}</span>
       <div>
     </li>
   </ul>
   `
})

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: `
    <h1>{{teacher}}</h1>
    <p>优秀讲师:</p>
    <ul>
      <li *ngFor="let list of teacherList;let idx=index"">
        <div>
            <span>{{idx}}</span>
            <span>{{list.name}}</span>
            <span>教龄:{{list.age}}</span>
        <div>
        <div *ngIf='teacherList.length > 4'>特级教师有点多</div>
      </li>
    </ul>
    `
})
 
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: `
    <button (click)="incident()">点击事件</button>
    {{clickMessage}}`
})
export class ClickMeComponent {
  clickMessage = '';
 
  onClickMe() {
    this.clickMessage = 'hello Word!';
  }
}

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

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

3 失去焦点事件

@Component({
  selector: 'key-up4',
  template: `
    <input
      (blur)="values+1" />
      <p>{{values}}</p>
    `
})
export class KeyUpComponent_v4 {
  values = '';
}

4 动态添加类(css)

@Component({
  selector: 'key-up4',
  template: `
    <div [ngClass]="{'active01':number>20}"></div>
    <div [ngClass]="{'active02':age>20&&age<40}"></div>
      <p>{{values}}</p>
    `
})
export class KeyUpComponent_v4 {
  number = 30;
  age = 30
}

5 阻止事件冒泡

@Component({
  selector: 'key-up4',
  template: `
    <button (click)='incident;$event.stopPropagation();'></button>
    `
})
//注意！ 使用tap来进行事件对点击，则上面对点击事件不会起效果