angular2学习笔记之事件和多组件

2016-07-01 02:36:00

组件免不了和用户交互，而交互中使用最频繁的莫过于点击事件的交互。angular2-demo

一、点击事件

代码解读

1. ClickEvent.ts

import {Component} from '@angular/core';import {BasicComponent} from './../basic/Basic';@Component({    selector:'click-event',    styles:[require('./ClickEvent.scss')],    template: require('./ClickEvent.html'),    directives:[BasicComponent] //需要引用的组件})export class ClickEventComponent{    showMsg():void{        console.log('己经触发点击事件');        alert('己经触发点击事件');    }}

2. ClickEvent.html

basic 就是引用的另一个组件,这个组件源自于上一篇博客基本组件

    点击事件

二、键盘按下事件

1. KeyupEvent.ts

初始化一个values为空字符串，然后当用户按下键盘的时候把值拼给values，并且以|隔开

import { Component } from '@angular/core';@Component({    selector:'keyup-event',    template: require('./KeyupEvent.html'),    styles:[require('./KeyupEvent.scss')]})export class KeyupEventComponent {    values:string = '';    onKey(value:any):void {        this.values += value + ' | ';    }}

2. KeyupEvent.html

当键盘按下的时候调用onKey方法

    {{values}}

三、 enter事件和失焦事件

1. EnterBlurEvent.ts

定义一个heroes数组并给几个初始值，添加英雄方法可以增加一个新的英雄到heroes中

import { Component } from '@angular/core';@Component({    selector:'enter-blur-event',    template: require('./EnterBlurEvent.html'),    styles:[require('./EnterBlurEvent.scss')]})export class EnterBlurEventComponent {    heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];    addHero(newHero: string) {        if (newHero) {            this.heroes.push(newHero);        }    }}