初识Angular----数据绑定及事件绑定等(一)

1、常用单向数据绑定

（1）单向:数据到视图绑定{{}}及管道操作符

xx.component.html:


    
双花括号引用组件中的属性---也叫单向数据到视图绑定
    {{title}}
    
我是英雄：{{hero.name}}
    
用于调试绑定----{{obj | json}}
    
使用参数的管道操作符---Birthdate: {{ data1 | date:'longDate'}}
    
多管道串联---Title through a pipe chain: {{title1 | uppercase | lowercase}}


xx.component.ts:

title = '双花括号插值表达式';
hero = {name: '小二郎', age: 6};
obj = {first: 'one',second: 'two'};
data1 = new Date();
title1 = 'abCD';

（2）单向数据到视图绑定 [] = 'expression'   

xx.component.html:

直接引用组件中的属性isUnchanged []='expression'---也叫单向数据到视图绑定
changed
{{message}}

xx.component.ts:

isUnchanged = false;
message = '单向数据绑定';

注意上面例子中[hidden]是span的属性，也是一个全局属性（attribute）,通常这种属性绑定的方法是极其常用的，包括自定义组件的属性绑定也是用这种方法。

注意，angular模板不可以访问后台私有属性或方法

注意理解一下数据到视图的单向绑定，也就说数据变化那么视图里面的相关绑定也会发生变化，如果视图变化，比如input你输入了值，但是ts文件里面的数据源是不发生变化的。双向数据绑定则是视图变化，数据源也发生变化。

2、双向绑定

（1）[(ngModel)]

xx.component.html:


{{someText}}


xx.component.ts:

pinked = '';
setUppercaseName(value) {
  this.pinked =  value.toUpperCase().toString();
}
someText = '最简单的双向数据绑定';

注意：使用 ngModel 时需要 FormsModule, 并把它添加到 Angular 模块的 imports 列表中，并且你不能把 [(ngModel)] 用到非表单类的原生元素或第三方自定义组件上，除非写一个合适的值访问器

[(ngModel)] 语法只能设置数据绑定属性。 如果要做更多或者做点不一样的事，也可以写它的展开形式。

3、样式绑定

（1）[style.属性名] = “ ‘属性名对应的设置’ ”

样式绑定

（2）[style.属性名] = “三目运算符表达式”

Big

（3）style专属绑定   [ngStyle] = "某变量名"   

xx.component.html：

 
    This div is initially italic, normal weight, and extra large (24px).


   黑底白字

xx.component.ts：

isUnchanged = true;
canSave = true;
isSpecial = true;
currentStyles = {
    'font-style':  this.canSave      ? 'italic' : 'normal',
    'font-weight': !this.isUnchanged ? 'bold'   : 'normal',
    'font-size':   this.isSpecial    ? '24px'   : '12px'
  };

4、css类绑定

（1）[class.xxx]="isxxx"  和 [class]="变量名"---会发生类名覆盖

xx.component.html:

css类  [class.xxx]="isxxx"：添加或删除单个类的最佳途径 
The class binding is special

BadCurly

xx.component.ts:

isSpecial = true;

badCurly = 'bad';

xx.component.css:

.special{
  background: #ffff99;
  font-weight: bolder;
}

.bad{
  background: #ff0000;
  color:#ffffff;
}

（2）css类专属绑定： ngClass---可以同时添加或移除多个类，它接收一个对象，对象的key值是css类名，value为布尔类型，表示是否应用该样式。

xx.component.html:

专属css类绑定ngClass：可以同时添加或移除多个类
This div



   用单引号包裹类名


 
  同时应用两种样式


xx.component.ts:

isSelected: boolean;
isUnchanged = false;
canSave = true;
isSpecial = true;
currentClasses =  {
  'saveable': this.canSave,
  'modified': !this.isUnchanged,
  'special':  this.isSpecial
};

xx.component.css:

.selected { border: 5px solid green; }
.saveable{
  color:greenyellow;
}
.modified{
  color:pink;
}
.special{
  background: #ffff99;
  font-weight: bolder;
}

5、例外的attribute绑定   [attr.属性名] = '表达式'

有的标签只有纯粹的attribute，比如colspan

xx.component.html:


   
One-Two
    
Five
Six

 {{actionName}} with Aria

xx.component.ts:

actionName = '千娇' ;

6、事件绑定
 

xx.component.html:
 元素、组件及指令的事件绑定 ()="方法（）或expression"
事件与property双向绑定   [(ngModule)]='xxx'

xx.component.html:

{{isDemoExpand ? '收起示例' : '展开示例'}}

xx.component.ts:

@Input() hasDemo = true;
@Input() isDemoExpand = false;
 toggleExpand() {
    if ( !this.hasDemo ) return;
   this.isDemoExpand = !this.isDemoExpand;
   this.isDemoExpandChange.emit(this.isDemoExpand);
  }