zoukankan      html  css  js  c++  java
  • [Angular 2] 9. Replace ng-modle with #ref & events

    Let's say you want to write a simple data bing app. when you type in a text box, somewhere in the application will show the result.

    In Angular 1, you can use ng-model to finish all those stuff,  but in angular 2, the concept behind has changed.

    <!-- index.html -->
    <html>
    <head>
        <title>Angular 2 Quickstart</title>
        <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
        <script src="https://jspm.io/system@0.16.js"></script>
        <script src="https://code.angularjs.org/2.0.0-alpha.26/angular2.dev.js"></script>
    </head>
    <body>
    <!-- The app component created in app.ts -->
    <hello></hello>
    <script>System.import('app');</script>
    </body>
    </html>
    import {
        Component,
        View,
        bootstrap
    } from 'angular2/angular2';
    
    @Component({
        selector: 'hello'
    })
    
    @View({
        template: `
            <div>
                <label for="name">Name: </label>
                <input type="text" #ref (keyup)/>
                <hr />
                <h2>{{ref.value}}</h2>
            </div>
        `
    })
    
    export class Hello{
    
    }
    
    bootstrap(Hello);

    We add a #ref, which you can name it anything you want after '#'. And then use 'ref.value' to the actual value from it.

    But only this won't work.. you also need to watch it. In Angualr 2, this is acomplished by add even listener to the dom. Here we use '(keyup)'.

  • 相关阅读:
    虚函数******
    C++ 中的运算符重载********
    继承
    静态成员和成员函数
    类指针
    内联函数
    k8基础架构
    cobbler自动装机
    ens33-eth0
    PXE-自动装机配置
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4812027.html
Copyright © 2011-2022 走看看