[Angular 2] 9. Replace ng-modle with #ref & events

最新推荐文章于 2019-10-30 14:22:52 发布

weixin_30906425

最新推荐文章于 2019-10-30 14:22:52 发布

阅读量95

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Answer1215/p/4812027.html

版权

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)'.

转载于:https://www.cnblogs.com/Answer1215/p/4812027.html