Angular2 基礎實踐（ 三 ）- 模板語法: 事件和引用（含視頻）

這裏講解兩個Angular2模板的語法，事件和引用

事件

Angular2中的事件處理：用click事件做介紹，在你的html模板加入
<button (click)="onClick()"></button>
注意其中的小括號，小括號是註冊事件的標記，與之對應的是中括號[]，[]表明輸入，能夠把()理解爲輸出，你能夠定義本身的輸入輸出(後面章節講解)。

示例代碼:

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

@Component({
  selector: 'app-simple-form',
  template: `
<button (click)="onClick(1)">Click me!</button>
`,
  styles: []
})
export class SimpleFormComponent {

  onClick(value){
    console.log(value);// 會打印1
  }

  constructor() { }// 這是es6 class初始化方法
}

引用

Angular2同一組件中可使用#定義引用,形如<input #myInput>，這樣統一模板的其餘地方就可使用這個input了。
示例代碼:

// 代碼中#myInput定義引用這個input，在下面的onClick中就可使用myInput了。
import { Component } from '@angular/core';

@Component({
  selector: 'app-simple-form',
  template: `<div>
<input #myInput type="text">
<button (click)="onClick(myInput.value)">Click me!</button>

</div>`,
  styles: []
})
export class SimpleFormComponent {

  onClick(value){
    console.log(value);// 這邊會打印被引用的input的值。
  }

  constructor() { }// 這是es6 class初始化方法
}

跟着視頻來一遍把，視頻連接。

測試一下代碼，Plunker連接