这里讲解两个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初始化方法 }
跟着视频来一遍把,视频链接。
原文链接:https://www.f2er.com/angularjs/148566.html