angular2.x指令
1.指令
*ngIf: 判断 isActive 为true时 <user-detail> 生效展示
<user-detail *ngIf="isActive"></user-detail>
*ngFor:遍历显示
<div *ngFor="let user of users">{{user.fullName}}</div>
ngClass:class为true类名text-success生效
[ngClass]="{'text-success':true}"
ngStyle: 样式绑定
<div [ngStyle]="{'background-color':'green'}"></<div>
判断添加
<div [ngStyle]="{'background-color':username === 'zxc' ? 'green' : 'red' }"></<div>
ngModule: 双向绑定
<div>
<h2>{{hero.name}} 信息!</h2>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name">
</div>
以下原文地址:http://victorsavkin.com/post/119943127151/angular-2-template-syntax
2. 属性和事件绑定
属性绑定
假设我们有一个组件来呈现的Todo,我们可以在我们的模板中使用这个组件,如下所示:
<todo-cmp [model]="myTodo"></todo-cmp>
这告诉Angular,只要myTodo发生变化,当有一个新的todo时,Angular会通过模型来自动更新todo组件
事件绑定
现在,让我们添加一个事件使组件更有趣。
<todo-cmp [model]="todo" (complete)="onCompletingTodo(todo)"></todo-cmp>
当事件complete触发时会告诉Angular调用 onCompletingTodo 方法
现在,让我们看看TodoCmp本身。
@Component({
selector: 'todo-cmp',
properties: ['model'],
events: ['complete']
})
class TodoCmp {
model;
complete = new EventEmitter(); // TypeScript 支持初始化
onCompletedButton() {
this.complete.next(); // 触发事件
}
}
这个组件声明数据绑定的名字为model,事件名为complete
Angular使用Rx事件风格来处理事件的接收,EventEmitter即实现了observable,又实现了observer接口(规范),因此,我们可以用它来触发事件,并且Angular也可以用它来监听事件。
正如你所看到的,属性和事件绑定的核心语法很简单。在核心语法之上,Angular提供了一些语法糖,使表达常用的编程模式更加容易。重要的是要了解,这仅仅是语法糖,而且它不会改变语义。
双向绑定
双向数据绑定在某些情况下是很方便的,最值得注意的是处理输入,正如我刚才提到的,属性绑定用于数据从父传递给子,事件绑定用于从子到父的数据传递。因此,我们可以使用两种方法来实现双向绑定。
<input [ng-model]="todo.text" (ng-model)="todo.text=$event"></input>
虽然这可以正常工作,但这太罗嗦。因为这是一个常见的模式,所以Angular提供语法糖简化这种写法。
<input [(ng-model)]="todo.text"></input>
要完成这个例子,让我们来实现Angular 2的ng-model
@Directive({
selector: '[ng-model]',
properties: ['ngModel'],
events: ['ngModelChanged: ngModel'],
host: {
"[value]": 'ngModel',
"(input)": "ngModelChanged.next($event.target.value)"
}
})
class NgModelDirective {
ngModel:any; // stored value
ngModelChanged:EventEmitter; // an event emitter
}
这是一种比较幼稚的ngModel实现,但它说明了如何实现双向数据绑定行为:输入将在text发生更改时更新,并在输入更改时更新text字段。
请注意,于Angular 1相反,你只要看看模板就可以知道哪些绑定是“双向”,哪些是“单向”。
此外,因为只有一个方向,属性绑定,被Angular自动执行,双向的行为更可预测的。
它不会破坏任何Angular 2的语法:这只是一些语法糖,没有别的。
我想提一提,你不用去实现NgModel。Angular 2配备了一个表单处理模块,其包括NgModel的实现。
插值
<div>Hello {{name}}</div>
使用语法糖
<div [textContent]="interpolate(['Hello'], [name])"></div>
绑定直接量
<show-title title="Some Title"></show-title>
使用语法糖
<show-title [title]=" 'Some Title' "></show-title>
移除括号
你可以使用bind-,in-和bindon-在你的模板中代替所有的括号,虽然这几乎不能称为“语法糖”
<some-component [prop]="someExp" (event)="someEvent()" [(two-way-prop)]="someExp"></show-title>
于上面相同
<some-component bind-prop="someExp" on-event="someEvent()" bindon-two-way-prop="someExp"></show-title>
3.局部变量
有两个组件互相交互,这种情况并不少见,Angular 2在模板中支持定义的局部变量。
<video-player #player></video-player>
<button (click)="player.pause()">Pause</button>
#player表示当前video-player组件自身,而没有#player的组件则可以通过player访问video-player组件
<input #i>
{{i.value}}
语法糖
<video-player #player></video-player>
相当于
<video-player var-player></video-player>
模板和 *
Angular以特殊的方式对待template元素。它们用来创建视图,你可以动态操作DOM块,*语法是一种捷径,它可以使你不用写出全部的<template>
元素,让我告诉你它是如何工作。
假设我们呈现Todo列表组件。
<todo-cmp *ng-for="#t of todos; #i=index" [model]="t" [index]="t"></todo-cmp>
去除语法糖后变为
<todo-cmp template="ng-for #item of items; #i=index" [model]="t" [index]="i"></todo-cmp>
再一次去除语法糖后变为
<template ng-for #item="$implicit" [ng-for-of]="items" #i="index">
<todo-cmp [model]="t" [index]="t"></todo-cmp>
</template>
该ngFor指令在视图上会创建$implicit和$index变量并绑定到模板上,在模板元素上声明的所有变量只能在元素内提供,这就是为什么以下是不正确
<todo-cmp *ng-for="#t of todos"></todo-cmp>
{{t}} <!-- t cannot be referenced here -->
你需要重点理解的是,当你建立你自己的指令来处理视图时,你的 * syntax 语法能扩展成什么。例如,如果你看ngfor,你会发现它有ngforof属性,但是没有of属性。
为什么不对ng-for自定义语法,象angular 1一样呢?这有几个很好的理由。有自定义语法意味着你必须知道这个微语言如何操作。这也意味着在工具(例如,IDE和LInter)中不能理解你的模板而且并不能提供自动完成和重构。
web组件和原生元素
在这篇博客我谈到了一切的内容 - 局部变量,属性和事件绑定 - 对于web组件和标准的html元素来讲使用方式是完全相同
我可以用Web组件更换TodoCmp,仍然使用相同方式与它进行交互。
<todo-cmp [model]="todo" (completed)="onCompletingTodo(todo)"></todo-cmp>
我可以用Web组件更换视频播放器,仍然使用相同方式与它进行交互。
<video-player #player></video-player>
<button (click)="player.pause()">Pause</button>
这将变得极为重要,因为更多的组件库可用。当运行在非Angular组件上也很重要(这是Angular 2目标之一),否者你不得不把每一个原生组件包装成一个Angular 2组件,那真的很糟糕。Angular 2你可以直接使用任何本地组件,使用相同的语法,只有当你例如想使用依赖注入时,可将它包装为Angular组件
设计目标
我希望你能明白在Angular 2里模板语法是怎么运作的.现在,我想来讨论一下为什么它用这种方式运作?它这么设计的目的是什么?
我们的主要设计目标是使模板更加清晰,开发者在不知如果使用指令情况也能够理解和重构模板,以及指令是如何工作的。
<component [property1]="name" property2="name"></component>
不管组件元素是什么,property1是指向一个name变量的属性 property2属性只表示一个name字符串,你也需要知道,组件的property2属性无法更新,property1属性绑定更新是从父到子。
<component [(property1)]="name"></component>
在这里,我们可以看到,name可以被更新,因为我们使用[()]语法
同样,你可以告诉在模板中定义了哪些变量,来看这里的*nf-for
<todo-cmp *ng-for="#t of todos"></todo-cmp>
其次,我们希望有丰富的开发工具,在下面的列子中,工具可以静态地推断出第一个index是组件上的字段,而第2个index是ng-for输出的局部变量
{{index}}
<div *ng-for="#item of items; var index=index">
{{index}
</div>
angular2.x指令的更多相关文章
- angular2 通过指令限制输入
最近在写一个表单,有些输入框只能输入数字,单又不想每次写表单的时候,都要去验证输入的是不是数字, 那么就想到直接限制只能输入数字,通过指令实现 这里需要注意的是,不只更改DOM的值,如果input为数 ...
- ionic2 angular2 模板指令补充
向div中插入带有html标签的数据 [innerHTML]="item.content" 字符串截取指令 {{item.de ...
- Angular2 从0到1 (二)
第一节:Angular2 从0到1 (一)第三节:Angular2 从0到1 (三)第四节:Angular2 从0到1 (四) 作者:王芃 wpcfan@gmail.com 第二节:用Form表单做一 ...
- angular2项目关于Echarts图表的处理
在NiceFish项目中关于Echarts组件和指令是直接注册在appModule根模块中的,这样路由只需这样写就可以让浏览器加载图标组件: 在chart组件视图中: <div class=&q ...
- 利用Angular2的Observables实现交互控制
在Angular1.x中,我们使用Promise来处理各种异步.但是在angular2中,使用的是Reactive Extensions (Rx)的Observable.对于Promise和Obser ...
- 迈向angularjs2系列(4):脏值检测机制
目录 一: 概念简介 脏值检测,简单的说就是在MVC的构架中,视图会通过模型的change事件来更新自己. 脏值检测的核心代码是观察者模式的实现,其机制会执行digest循环,在特定UI组件的上下文执 ...
- Angular2 指令
1. 指令说明 Angular2 指令是构成Angular2应用程序的重要组成部分,指令主要用来对模板的标签或者元素附加一些新的特性或者功能,改变一个 DOM 元素的外观或行为,Angular2指 ...
- Angular2组件与指令的小实践——实现一个图片轮播组件
如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图.而除了直接看的见的躯体之外,一个完整的" ...
- 迈向angularjs2系列(2):angular2指令详解
一:angular2 helloworld! 为了简单快速的运行一个ng2的app,那么通过script引入预先编译好的angular2版本和页面的基本框架. index.html: <!DOC ...
随机推荐
- 当谈到 GitLab CI 的时候,我们都该聊些什么(下篇)
上篇主要介绍了 GitLab WorkFlow 以及 CI/CD 做的事情,并且详细分析 GitLab CI 跟 Runner 信息交互是如何进行的.接下来将为大家讲解 Executor 的实现,再通 ...
- WinForm程序的发布
- win10 uwp 无法附加到CoreCLR
本文说的是在vs调试无法附加到CoreCLR.拒绝访问.已经如何去解决,可能带有一定的主观性和局限性,说的东西可能不对或者不符合每个人的预期.如果觉得我有讲的不对的,就多多包含,或者直接关掉这篇文章, ...
- hover与click样式冲突
如果你的hover事件和click事件的样式不同,如元素背景本来是#fff,如果hover时背景是#ddd,点击时背景是#aaa,那么问题是当你点击后,鼠标再移动到这个元素时背景会变成#ddd,而你希 ...
- zabbix自动截图留档_python版
1 背景 每个DB Server都有zabbix监控,除了异常情况的报警信息外,也会在日检.周检.月检等工作中用到zabbix的监控数据,对zabbix监控数据会做两种处理:1 数据分析(环比 ...
- 【转】花开正当时,十四款120/128GB SSD横向评测
原文地址:http://www.expreview.com/19604-all.html SSD横评是最具消费指导意义的评测文章,也是各类热门SSD固态硬盘的决斗疆场.SSD评测在行业内已经有不少网站 ...
- 详解Java中的clone方法
详解Java中的clone方法 参考:http://blog.csdn.net/zhangjg_blog/article/details/18369201/ 所谓的复制对象,首先要分配一个和源对象同样 ...
- 微信公众平台开发接口PHP SDK
以前没接触过微信公众平台开发,前几天刚找到实习公司就要求我做一个微信公众平台的应用,于是乎开始学习微信公众平台开发接口的调用,看开发文档之后还是不知道从何入手,只好上网找入门资料,终于在方倍工作室找到 ...
- Java基础笔记12
1.自定义异常. 定义一个类,让该类继承Exception.并写出该类的所有的构造函数.2.IO流. java.io 文件类.File 字节输入和输出流 InputStream OutputStrea ...
- Linux系列教程(十)——Linux文本编辑器vim
通过前面几篇博客我们终于结束了Linux常用命令的介绍,Linux常用命令主要包括以下: ①.Linux文件和目录处理命令 ②.Linux链接命令和权限管理命令 ③.Linux文件搜索命令 ④.Lin ...