Angular2 基础实践（ 三 ）- 模板语法: 事件和引用（含视频）

大佬教程收集整理的这篇文章主要介绍了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链接

大佬总结

以上是大佬教程为你收集整理的Angular2 基础实践（ 三 ）- 模板语法: 事件和引用（含视频）全部内容，希望文章能够帮你解决Angular2 基础实践（ 三 ）- 模板语法: 事件和引用（含视频）所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。