今天我们要讲的是angualr2的模板语法，官网写的很清楚，但我也用通俗易懂的讲法再罗列一下吧！

例子

源代码

属性绑定

不需要特别的指令，只需要用[value]就可以了，并不只有value，[]里面可以是任何常用的html元素的属性！

app/app.html

<input [value]="firstName" [placeholder]="firstNamePlaceholder" />

也可以用双花括号：

app/app.html

<input value="{{firstName}}" placeholder="{{firstNamePlaceholder}}" />

绑定的属性从何而来？从我们定义的类中：

app/app.ts

firstName: string = 'lewis';

事件

你可以在angular2中监听任何html5原生的元素事件，只需要使用这个语法： (eventName)

app/app.html

<button (click)="doSomething($event)" >点击</button>

doSomething从何而来？跟属性firstName一样，在类中定义：

app/app.ts

doSomething($event){
        console.log('点击了这个按钮：',$event.target);
    }

双向数据绑定

刚才讲的是单向数据绑定，不信你可以改变input的值看看，别的绑定会不会变动。答案是不会！这次我们来做双向数据绑定：

app/app.html

<input type="text" [value]="firstName" (input)="firstName=$event.target.value" />
    <input type="text" [(ngModel)]="firstName" />

使用单向绑定加事绑定可以，使用[(ngModel)]也可以！这样你再改变input的值，所有绑定firstName的值都会跟着变化！

angular2的双向数据绑定没有用“脏检查”，而是用了zone.js。这是个什么库呢？

A zone is an execution context that persists across async tasks.

用来维持切换上下文的库。用来替代$apply()的一个库。告诉你何时更新视图！

局部变量

局部变量 # 是一个对象或者dom元素的指针，什么意思？看代码：

app/app.html

<!-- phone refers to the input element; pass its `value` to an event handler -->
    <input #phone placeholder="phone number">
    <button (click)="callPhone(phone.value)">Call</button>

    <!-- fax refers to the input element; pass its `value` to an event handler -->
    <input var-fax placeholder="fax number">
    <button (click)="callFax(fax.value)">Fax</button>

一切尽在不言中！

*语法与template标签

先看一个*语法与template标签的应用：

<p *ngIf="isActive">我是段落</p>

相当于

<template [ngIf]="isActive"><p>我是段落</p></template>

这段代码的意思是，如果isActive为true则渲染p元素。

template标签声明了一段 DOM ，这段DOM在runtime后会被实例化。

使用template我们可以将一段DOM包裹起来，声明它，然后决定要不要渲染他们。不渲染的话，里面的元素就不会加载，可以节省运算。如果你用div和隐藏效果的话，里面的元素还得加载，浪费了运算。

我们也使用*语法替代template标签。起到同样的作用。

用*装饰的自带指令还有：NgFor, NgIf, 和NgSwitch。都是控制是否渲染的指令。我们用*来装饰后，就可以产生类似template的效果！

更多语法

以上只是介绍了常用的语法，还有更多的语法参考可以直接去官网

教程源代码及目录

如果您觉得本博客教程帮到了您，就赏颗星吧！

https://github.com/lewis617/angular2-tutorial

angular2系列教程（二）模板语法的更多相关文章

  1. angular2系列教程（一）hello world

    今天我们要讲的是angular2系列教程的第一篇,主要是学习angular2的运行,以及感受angular2的components以及模板语法. 例子 这个例子非常简单,是个双向数据绑定.我使用了官网 ...

  2. CRL快速开发框架系列教程二(基于Lambda表达式查询)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  3. 黄聪：Microsoft Enterprise Library 5.0 系列教程(二) Cryptography Application Block (初级)

    原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(二) Cryptography Application Block (初级) 企业库加密应用程序模块提供了2种方 ...

  4. webpack4 系列教程(二): 编译 ES6

    今天介绍webpack怎么编译ES6的各种函数和语法.敲黑板:这是webpack4版本哦, 有一些不同于webpack3的地方. >>> 本节课源码 >>> 所有课 ...

  5. Shell脚本系列教程二: 开始Shell编程

    Shell脚本系列教程二: 开始Shell编程 2.1 如何写shell script? (1) 最常用的是使用vi或者mcedit来编写shell脚本, 但是你也可以使用任何你喜欢的编辑器; (2) ...

  6. WPF系列教程——(二)使用Prism实现MVVM设计模式 - 简书

    原文:WPF系列教程--(二)使用Prism实现MVVM设计模式 - 简书 本文假设你已经知道MVVM设计模式是什么,所以直接进入正题,今天我们就用Prism来实现WPF的MVVM设计模式,百度上关于 ...

  7. angular2系列教程（十）两种启动方法、两个路由服务、引用类型和单例模式的妙用

    今天我们要讲的是ng2的路由系统. 例子

  8. C#微信公众号开发系列教程二（新手接入指南）

    http://www.cnblogs.com/zskbll/p/4093954.html 此系列前面已经更新了两篇博文了,都是微信开发的前期准备工作,现在切入正题,本篇讲解新手接入的步骤与方法,大神可 ...

  9. Android Studio系列教程二--基本设置与运行

    Android Studio系列教程二--基本设置与运行 2014 年 11 月 28 日 DevTools 本文为个人原创,欢迎转载,但请务必在明显位置注明出处! 上面一篇博客,介绍了Studio的 ...

  10. NGUI系列教程二

    接下来我们创建一个Label,NGUI->Open the Widget Wizard,打开widgetTool对话框,在Template中选择Label,确定AddTo右侧选项为panel,点 ...

随机推荐

  1. [Beautifulzzzz的博客目录] 快速索引点这儿O(∩_∩)O~~，红色标记的是不错的(⊙o⊙)哦~

    3D相关开发 [direct-X] 1.direct-X最小框架 [OpenGL] 1.环境搭建及最小系统 [OpenGL] 2.企业版VC6.0自带的Win32-OpenGL工程浅析 51单片机 [ ...

  2. JSTL的test里的逻辑判断不能有空格

    前天遇到了一个bug,有一个jstl的判断语句怎么都进不去,看了半天都没有发现什么问题,最后使用最原始的方式,一行一行的删除代码,重要找到了原因,原来是jstl的test逻辑判断里面不能有空格导致的.

  3. 20135316王剑桥 linux第二周课实验笔记

    Linux中命令格式为: command [options选项] [arguments参数] //中括号代表是可选的,即有些命令不需要选项也不需要参数 ls或ls .显示是当前目录的内容,这里“.”就 ...

  4. 正则表达式 Regular Expressions

    python method search wordlist = [w for w in nltk.corpus.words.words('en' ) ifw.islower()] print [w f ...

  5. [PHP]htmlentities() 函数

    定义和用法 htmlentities() 函数把字符转换为 HTML 实体. 语法 htmlentities(string,quotestyle,character-set) 参数 描述 string ...

  6. Raspberry PI(树莓派)安装ZMAP

    以前配置树莓派安装ZMAP一直没有装成功,今天又试了下,装成功了,记录下. Good Job. Zmap地址: https://zmap.io/documentation.html step1: gi ...

  7. 嵌入式开发——boa服务器下的ajax与cgi通信

    博主最近在最有做一个嵌入式课程设计,要求是利用基于cortax a8的物联网实验箱做一个简单的嵌入式网页交互系统作为课程设计来验收评分.因为本身自己是学前端的,所以网页部分并不是重点,主要是和boa服 ...

  8. Learn Python More

    0, 看了一个python项目开源源码, 才知道现在这点python知识实在是弱爆了.. 尼玛就像学了2500个常用汉字, 然后要去理解"楚辞".. 代码如下, 解释一点一点从网上 ...

  9. Unix 文件系统读写时权限校验

    文件系统中的所有文件都是在读出或写入时进行权限校验 一个问题,如果一个用户对一个普通文件有读写权限,在使用vim编辑时,管理员撤销掉此用户对此文件的写入权限 那么,这个普通用户还可以将修改写入文件吗?

  10. CRM 数据查重

    2.8 小工具 · 纷享销客产品手册https://www.fxiaoke.com/mob/guide/crmdoc/src/2-8%E5%B0%8F%E5%B7%A5%E5%85%B7.html C ...