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

1、常用单向数据绑定

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

xx.component.html:

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

xx.component.ts:

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

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

xx.component.html:

<h3>直接引用组件中的属性isUnchanged []='expression'---也叫单向数据到视图绑定</h3>
<span [hidden]="isUnchanged">changed</span>
<input #myInput type="text" [ngModel]="message">{{message}}

xx.component.ts:

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

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

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

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

2、双向绑定

（1）[(ngModel)]

xx.component.html:

<input [ngModel]="pinked" (ngModelChange)="setUppercaseName($event)">
<input type="text" [(ngModel)]="someText">{{someText}}


xx.component.ts:

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

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

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

3、样式绑定

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

<section [style.border]=" '1px solid red' ">样式绑定</section>

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

<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>

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

xx.component.html：

<div [ngStyle]="currentStyles"> 
    This div is initially italic, normal weight, and extra large (24px).
</div>
<div [ngStyle]="{color: 'white', 'background-color': 'black'}">
   黑底白字
</div>
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:

<h3>css类  [class.xxx]="isxxx"：添加或删除单个类的最佳途径 </h3>
<div [class.special]="isSpecial">The class binding is special</div>
<!-- reset/override all class names with a binding：页面样式显示为class=bad时的样式-->
<div class="bad special" [class]="badCurly">BadCurly</div>

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:

<h3>专属css类绑定ngClass：可以同时添加或移除多个类</h3>
<div [ngClass]="currentClasses">This div</div>
<input type="text"  [ngClass]="{selected: isSelected}" (mousedown)="isSelected = true"
 (mouseup)="isSelected= false" (mouseleave)="isSelected = false">
<!-- 样式名包含'-' -->
<div [ngClass]="{'middle-line': false}">
   用单引号包裹类名
</div>
<!-- 使用样式列表 -->
<div class="base" [ngClass]="['saveable', 'special']"> 
  同时应用两种样式
</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;
}

（3）同时绑定普通class及计算的class

// html
<span class="status {{classMap[currentSprite?.status]}}">
{{currentSprite?.statusName}}
</span>

// css
.normal {
      background: linear-gradient(180deg, rgba(111, 255, 0, 0.54) 0%, rgba(77, 255, 0, 0.2) 40%, rgba(77, 255, 0, 0.2) 80%, rgba(75, 255, 0, 0.54) 100%);
    }
    .warning {
      background: linear-gradient(180deg, rgba(255, 170, 0, 0.54) 0%, rgba(255, 170, 0, 0.2) 40%, rgba(255, 170, 0, 0.2) 80%, rgba(255, 170, 0, 0.54) 100%);
    }
    .obstacle {
      background: linear-gradient(180deg, rgba(255, 78, 0, 0.54) 0%, rgba(255, 78, 0, 0.2) 40%, rgba(255, 78, 0, 0.2) 80%, rgba(255, 78, 0, 0.54) 100%);
    }

// js
classMap = {
    normal: 'normal',
    warning: 'warning',
    obstacle: 'obstacle',
  };

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

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

xx.component.html:

<table border=1>
   <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
    <tr><td>Five</td><td>Six</td></tr>
</table>
 <button [attr.aria-label]="actionName">{{actionName}} with Aria</button>

xx.component.ts:

actionName = '千娇' ;

6、事件绑定
 

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

xx.component.html:

<a class="app-button demo-indicator" *ngIf = 'hasDemo' (click)="toggleExpand()">{{isDemoExpand ? '收起示例' : '展开示例'}}</a>

xx.component.ts:

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