[Angular 2] Property Binding
Property Binding is bind property NOT attribute!
import {Component, Input, Output, EventEmitter} from 'angular2/core'; @Component({
selector: 'hero-item',
styles: [
'.active {color: red}'
],
template: `
<li [class.active]="isSelected"
[attr.aria-label]="hero.name"
(click)="selectHero(hero)">
{{hero.name}}
</li>
`
})
// <li [ngClass]="{active: isSelected}"></li> export class HeroItem{
label="This is a super hero";
isSelected = false;
@Input() hero ;
@Output() changed = new EventEmitter();
constructor(){ } selectHero(hero){
this.changed.emit(hero);
this.isSelected = true;
}
}
So 'class' is attribute on DOM, but 'class.active' is an property.
'aria-label' is attribute, so need to write like 'attr.aria-label'.
If you don't like use 'class.active', you can use 'ngClass' as shown in commnets
[Angular 2] Property Binding的更多相关文章
- Unity3D学习笔记——NGUI之Property Binding
Property Binding:用于绑定两个组件,然后可以将一个组件的信息发送给另一个组件. 效果图如下: 一:使用步骤 1.建立一个Sprite 2.建立一个Label 3.为Sprite添加Pr ...
- 从 SimpleIntegerProperty 看 Java属性绑定(property binding) 与 观察者模式(Observable)
//TODO:ExpressionHelper .bindBidirectional双向绑定.以及IntegerExpression的一系列算术方法和返回的IntegerBinding暂未详细解析(比 ...
- [AngularJS - thoughtram] Exploring Angular 1.3: Binding to Directive Controllers
The post we have: http://www.cnblogs.com/Answer1215/p/4185504.html gives a breif introduce about bin ...
- [译]Exploring Angular 1.3: Binding to Directive Controllers
原文: http://blog.thoughtram.io/angularjs/2015/01/02/exploring-angular-1.3-bindToController.html Angul ...
- Event Binding in Angular
https://www.pluralsight.com/guides/angular-event-binding Introduction In this guide, we will explore ...
- angular学习(二)—— Data Binding
转载请写明来源地址:http://blog.csdn.net/lastsweetop/article/details/51182106 Data Binding 在angular中.model和vie ...
- 【Angular 5】数据绑定、事件绑定和双向绑定
本文为Angular5的学习笔记,IDE使用Visual Studio Code,内容是关于数据绑定,包括Property Binding.Class Binding.Style Binding. 在 ...
- angular学习3
#创建了一个component 查看angular.json文件: "prefix":"app", 在所创建的component的selector上添加了app ...
- Angular 2 Architecture Overview
Module 简单来说模块(module)就是完成共同目的的代码块,export一些内容例如一个类.函数.或值变量. component就是一个基本的Angular块,一个component类其实也是 ...
随机推荐
- (转)asp.net 使用cookie完成记住密码自动登录
代码如下 复制代码 string username = this.txtUserName.Text;//用户名 string password = this.txtPassword.T ...
- 执行oracle函数的四种方法
1.在定义函数时:如果有参数,则参数可有类型但是不加长度. 2.在执行函数: var/variable var_name var_type(如果数据类型是number则没有长度,如果数据类型是varc ...
- pl/sql的工具导入和代码导入
工具导入:在导入的文件中添加导入工具.导入imp:F:\app\Administrator\product\11.1.0\db_1\BIN\imp.exe导出exp:F:\app\Administra ...
- ibatis.net调用oracle存储过返回游标SYS_REFCURSOR结果集
最近在用ibatis.net框架和oracle 11g开发一套程序.其中有一个需求就是通过存储过程,查询指定条件的数据集. 但是在开发的过程中遇到了问题,问题如下: 1.如何通过ibatis.net执 ...
- Phpcms V9全站伪静态设置方法
为什么要伪静态?具体在这里就不说了,你懂的!一方面更新修改后不需要生成静态文件,另一方面为了SEO! 访问规则如下 1 2 list-{$catid}-{$page}.html content-{$c ...
- ServerInfo.INI解密
[GlobalInfo]LastServerName=000781ED2D127FBA074D97444DC82F216443034E66BB341A428B14E326A656B9LastServe ...
- Nvidia显卡怎样查看显存大小及硬件相关信息
在电脑上安装Nvidia显卡驱动,平时也会通过Nvidia控制面板来查看显示显存位宽及宽带.显示显存容量和显示显存芯片信息等等,那么该如何查看Nvidia显存大小以及Nvidia硬件相关信息呢? 1. ...
- d023: 各位数字之和
内容: 求输入的一个整数的各位数字之和 输入说明: 一行一个整数 输出说明: 一个整数 输入样例: 2147483646 输出样例 : 45 #include <stdio.h> int ...
- 最简单的ASP动态页面生成伪静态方法
目前网站制作中很多网站都采用生成静态页的方法,原因是这样访问速度会得到提高(服务器端CPU利用率很低),另外也容易被搜索引擎收录,但是这带来的一个问题就是需要足够大的空间存放这些静态页面,如果你的空间 ...
- protocol buffer和当年corba ,和现在SOA有啥异同点
CORBA是对象管理集团(OMG)的一个标准,使得不同语言编写的,运行在不同计算机上的能够协同工作.标准包括分布式计算的通讯协议(GIOP和IIOP),可映射到多种语言的接口描述语言(IDL),对象请 ...