zoukankan      html  css  js  c++  java
  • Angular2 Decorator

    1 at first, we use the (keyup) event handler to update the modify

    @Component({
        selector: 'my-app'
    })
    
    @Template({
        inline: '<h1>{{myName}}</h1>' +
        '<input type="text" #newname (keyup)/>' +
        '<h3 [style.color]="newname.value">{{newname.value}}</h3> '
    
    })
    

    but, if i wanna do something more when I use the keyup in all the input keyup?

    we use the Decorator to decorator the event

    2 import the Decorator

    import {Component, Template, bootstrap, Decorator} from 'angular2/angular2';
    

    3 define the Decorator

    @Decorator({
        selector: 'input',
        events: {'keyup': 'onKeyUp()'}
    })
    
    class InputDecorator {
        onKeyUp() {
            console.log('do nothing');
        }
    }
    

    4 use the decorator

    @Template({
        inline: '<h1>{{myName}}</h1>' +
        '<input type="text" #newname />' +
        '<input type="text" #test/>' +
        '<h3 [style.color]="newname.value">{{newname.value}}</h3> ',
        directives: [InputDecorator]
    
    })
    

    5 the whole page code

    import {Component, Template, bootstrap, Decorator} from 'angular2/angular2';
    
    @Decorator({
        selector: 'input',
        events: {'keyup': 'onKeyUp()'}
    })
    
    class InputDecorator {
        onKeyUp() {
            console.log('do nothing');
        }
    }
    
    @Component({
        selector: 'my-app'
    })
    
    @Template({
        inline: '<h1>{{myName}}</h1>' +
        '<input type="text" #newname />' +
        '<input type="text" #newnam />' +
        '<h3 [style.color]="newname.value">{{newname.value}}</h3> ',
        directives: [InputDecorator]
    
    })
    
    class MyApp {
    
        constructor() {
            this.myName = 'Jackey';
            this.myFriends = [
                {name: 'Jackey1', age: 25},
                {name: 'Jackey2', age: 26}
            ];
        }
    }
    
    bootstrap(MyApp);
    

      

  • 相关阅读:
    tree related problems (update continuously)
    [单元測试]_[VC2010使用gtest单元測试入门]
    generate alphanumeric serial number
    UiAutomator源代码分析之获取控件信息
    Fckeditor常见漏洞的挖掘与利用整理汇总
    AsyncAwait
    .Net异步编程知多少
    ParameterizedThreadStart task
    AsyncAwait 学习
    8天玩转并行开发——第八天 用VS性能向导解剖你的程序
  • 原文地址:https://www.cnblogs.com/lihaozhou/p/4663067.html
Copyright © 2011-2022 走看看