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

最新推荐文章于 2023-02-01 17:58:02 发布

若简LL

最新推荐文章于 2023-02-01 17:58:02 发布

阅读量3.5k

点赞数

分类专栏： Angular2学习笔记文章标签： angular angular2 学习笔记

本文链接：https://blog.csdn.net/github_33116729/article/details/50704848

版权

Angular2学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

通过模板调用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 = {}));