Angular2学习笔记.3、通过模板调用Controller事件实现用户输入和显示，UserInput

来源：互联网发布：21lic单片机项目外包网编辑：程序博客网时间：2024/06/01 09:43

通过模板调用Controller事件实现用户输入和显示

本篇的内容会比较少，但是遵循着官方教程的步骤，还是单独发出来吧。这个工程实现了将用户在<input>中的输入传入到Controller的相应事件，并把它在也变其他地方显示出来。
参考官方文档

工程结构

关于对工程结构的相关约定在前两篇笔记已有详细约定，以后也不再赘述。

/  |-package.json  |-index.html  |-node_modules/    |-libraries    |-...  |-UserInput/  |-index.html  |-app/    |-main.js

为了精简，这个工程没有使用之前介绍的模板分离和Model注入，仅仅对所要涉及的内容进行展示，以后也是如此。
工程示例

正文

Angular中的用户输入依赖DOM event(事件)驱动。你可以使用原生事件，例如click,mouseover和keyup。Angular使用一种特殊的syntax(语法)来对DOM元素注册事件。
事件语法开始于被圆括号包裹的事件名称，一个控制器的函数assign(分配)给这个事件名称。

<input #myname (keyup)="foo"><p>{{myname.value}}</p>

#myname在模板中创建了一个局部变量，我们可以在下面的<p>中引用这个变量。当或可以keyup事件时，(keyup)通知Angular去trigger(触发)更新。{{myname.value}}将<p>的text node(节点)和输入值绑定。当你修改<input>中的数据时，它会同步的显示在下面的<p>中。
此时（2016-2-20），官方文档中使用的是(keyup)而不是(keyup)="foo"，这不能正常运行。
(keyup)可以改为(mouseover)或其他事件，如果为(mouseover)，那么Angular会在鼠标经过时更新内容，而不是在按键抬起时。
foo在这里是无意义的，但是不能为空。

构建工程

下面实现这次的UserInput工程，这个工程会首先显示一个列表，接着下面有一个<input>和一个<button>，当输入内容后，点击按钮会将输入的内容插入到上方列表。也可以在输入内容后按回车键，同样会将内容插入到列表，还会将输入框清空。
建立/UserInput/index.html：

<html>  <head>    <title>User Input</title>    <meta name="viewport" content="width=device-width, initial-scale=1">    <!-- 1. Load libraries -->    <!-- IE required polyfill -->    <script src="/node_modules/es6-shim/es6-shim.min.js"></script>    <script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>    <script src="/node_modules/rxjs/bundles/Rx.umd.js"></script>    <script src="/node_modules/angular2/bundles/angular2-all.umd.js"></script>    <!-- 2. Load our 'modules' -->    <script src='/UserInput/app/main.js'></script>  </head>  <!-- 3. Display the application -->  <body>    <todo-list>Loading...</todo-list>  </body></html>

建立/UserInput/app/main.js:

(function(app){    app.UserInputComponent =     ng.core.Component({        selector:'todo-list',        template:'<ul>' +      '<li *ngFor="#todo of todos">' +      '{{ todo }}' +      '</li>' +      '</ul>' +      '<input #textbox (keyup)="doneTyping($event)">' +      '<button (click)="addTodo(textbox.value)">Add Todo</button>'    })    .Class({        constructor:function(){            this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];            this.addTodo = function(todo) {                this.todos.push(todo);            };            this.doneTyping = function($event) {                if($event.which === 13) {                    this.addTodo($event.target.value);                    $event.target.value = null;                }            }        }    });})(window.app || (window.app = {}));(function(app){    document.addEventListener('DOMContentLoaded',function(){        ng.platform.browser.bootstrap(app.UserInputComponent);    });})(window.app || (window.app = {}));

在/下运行”npm start”。

0 0