angular2学习笔记（9）

模板语法：

从我们的经验上可以看出许多我们熟悉的组件/模板都是MVC模式或者MVVC模式。Angular的组件充当了Controller/ViewModel 的部分，组件的Template充当了View部分。

模板中的插入

标签内容中插入

<p>My current hero is {{currentHero.firstName}}</p>

标签属性中插入

<h3>  {{title}}  <img src="{{heroImageUrl}}" style="height:30px"></h3>

运算结果插入

<!-- "The sum of 1 + 1 is 2" --><p>The sum of 1 + 1 is {{1 + 1}}</p>

表达式中可以调用主组件方法getval()

<!-- "The sum of 1 + 1 is not 4" --><p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p>

模板表达式

模板表达式生成值。Angular执行表达式并将其分配到一个属性目标上，如一个HTML元素，一个组件，或一个指令组件。 形如下面的格式：

[property]="expression".

支持： +， new操作符，链接表达式 用；或者，，自增++，自减--。 不支持位操作 | 和&

表达式内容

{{title}}这种的表达式，title是组件的属性，并且是数据双向绑定。

[disabled]="isUnchanged" 表达式isUnchanged是组件本身的属性。

表达式指南

表达式可以使用组件和中断组件，请遵循表达式的使用规范。

我们不允许更改目标属性的值以外的任何应用程序状态。这是Angular "单向数据流"规则。

绑定语法概述

1. 数据源到试图

语法：

{{expression}}  [target] = "expression"bind-target = "expression"

绑定类型：插入，Dom属性，html属性，样式Class名称，样式css

1. 从试图到数据源

语法：

(target) = "statement"on-target = "statement"

绑定类型：Event

1. 双向绑定

语法：

[(target)] = "expression"bindon-target = "expression"

绑定类型：支持双向类型的地方。

官方有一段说明HTML Attribute 和DOM property 他们之间的区别。

可以具体看看Attribute和Property的区别

绑定对象列表

Property 绑定或插入

<img src="{{heroImageUrl}}"><img [src]="'' + heroImageUrl"><div>The title is {{title}}</div><div [textContent]="'The title is '+title"></div>

Attribute, Class, and Style 绑定

Attribute Bingding

例如 attr.colspan

<table border=1>  <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>  <!-- ERROR: There is no `colspan` property to set!    <tr><td colspan="{{1 + 1}}">Three-Four</td></tr>  -->  <tr><td>Five</td><td>Six</td></tr></table><button [attr.aria-label]="actionName">{{actionName}} with Aria</button>

Class Bingding

<!-- standard class attribute setting  --><div class="bad curly special">Bad curly special</div><!-- reset all class names with a string binding  --><div class="bad curly special"     [class]="'bad curly'">Bad curly</div><!-- toggle the "special" class on/off with a property --><div [class.special]="isSpecial">The class binding is special</div><!-- binding to `class.special` trumps the class attribute --><div class="special"     [class.special]="!isSpecial">This one is not so special</div>

Style Binding

<button [style.color] = "isSpecial ? 'red' : 'green'">Red</button><button [style.backgroundColor]="canSave ?'cyan' : 'grey'" >Save</button><button [style.fontSize.em]="isSpecial ? 3 : 1" >Big</button><button [style.fontSize.%]="!isSpecial ? 150 : 50" >Small</button>

Event Binding

<button (click)="onSave()">Save</button><button on-click="onSave()">On Save</button>!-- `myClick` is an event on the custom `MyClickDirective` --><div myClick (myClick)="clickity=$event">click with myClick</div><input [value]="currentHero.firstName"       (input)="currentHero.firstName=$event.target.value" >

NgClass

setClasses() {  let classes =  {    saveable: this.canSave,      // true    modified: !this.isUnchanged, // false    special: this.isSpecial,     // true  }  return classes;}<div [ngClass]="setClasses()">This div is saveable and special</div>

NgStyle

setStyles() {  let styles = {    // CSS property names    'font-style':  this.canSave      ? 'italic' : 'normal',  // italic    'font-weight': !this.isUnchanged ? 'bold'   : 'normal',  // normal    'font-size':   this.isSpecial    ? 'x-large': 'smaller', // larger  }  return styles;}<div [ngStyle]="setStyles()">  This div is italic, normal weight, and x-large</div>

NgIf

<div *ngIf="currentHero">Hello, {{currentHero.firstName}}</div>

NgSwitch

<span [ngSwitch]="toeChoice">  <template [ngSwitchWhen]="'Eenie'">Eenie</template>  <template [ngSwitchWhen]="'Meanie'">Meanie</template>  <template [ngSwitchWhen]="'Miney'">Miney</template>  <template [ngSwitchWhen]="'Moe'">Moe</template>  <template ngSwitchDefault>Other</template></span>

NgFor

<div *ngFor="#hero of heroes">{{hero.fullName}}</div><!-- NgFor with index --><div *ngFor="#hero of heroes, #i=index">{{i + 1}} - {{hero.fullName}}</div>

NgForm

<form (ngSubmit)="onSubmit(theForm)" #theForm="ngForm">  <div class="form-group">    <label for="name">Name</label>    <input class="form-control" required ngControl="firstName"      [(ngModel)]="currentHero.firstName">  </div>  <button type="submit" [disabled]="!theForm.form.valid">Submit</button></form>

输入输出值

输入属性通常接收数据值。输出属性实现事件生产者

@Input()  hero: Hero;@Output() deleted = new EventEmitter<Hero>();