z科技

——知科技,了解,拥有,掌控

Angular实例之模板语法

一、插值表达式:{{模板表达式}} 。举例,比如一个组件的模板片断如下:
<p>The sum of 1 + 1 is not {{1 + inv.total + getVal()}}</p>
其中:1 + inv.total + getVal()就是一个模板表达式。inv.total是组件中的属性,getVal()是组件中定义的一个方法。模板表达式所用的语言看起来很像 JavaScript。 很多 JavaScript 表达式也是合法的模板表达式。

二、 
模板语句:(event)="模板语句"模板语句用来响应由绑定目标(如 HTML 元素、组件或指令)触发的事件。举例,比如一个组件的模板片断如下:
<button (click)="deleteHero()">Delete hero</button>
其中:click是该按钮的敲击事件,deleteHero()是响应该按钮敲击事件的语句(对应组件中的方法)。

三、绑定
 
绑定的类型可以根据数据流的方向分成三类: 从数据源到视图、从视图到数据源以及双向的从视图到数据源再到视图。在Angular中,模板扮演着视图的角色。
单向数据流:
1、属性绑定:[属性名]
 
数据流方向:从组件到元素。
举例:
 设置html元素的属性。比如把
image 元素的src属性单向绑定到组件的heroImageUrl属性上:
<img [src]="heroImageUrl">
设置指令的属性:
<div [ngClass]="classes">[ngClass] binding to the classes property</div>
设置自定义组件的模型属性(这是父子组件之间通讯的重要途径):
 <hero-detail [hero]="currentHero"></hero-detail>
注意: 
属性绑定是单向数据绑定,因为值的流动是单向的,从组件的数据属性流动到目标元素的属性。

2、attribute 绑定:[attr.attribute的名字]
数据流方向:从组件到元素。
举例:
<button [attr.aria-label]="actionName">{{actionName}} with Aria</button> 

3、 
CSS 类绑定:[class.class-name]。点 (.)和class-name两部分是可选的。
 
借助 CSS 类绑定,可以从元素的class attribute 上添加和移除 CSS 类名来更改样式。
数据流方向:从组件到元素。
举例: 当 badCurly 有值时 class 这个 attribute 设置的内容会被完全覆盖:
<!-- reset/override all class names with a binding --><div class="bad curly special"[class]="badCurly">Bad curly</div>

 
可以绑定到特定的类名。 当模板表达式的求值结果是真值时,Angular 会添加这个类,反之则移除它:
 
<!-- toggle the "special" class on/off with a property --><div [class.special]="isSpecial">The class binding is special</div>

虽然这是切换单一类名的好办法,但我们通常更喜欢使用 NgClass指令 来同时管理多个类名。
 

4、
样式绑定:样式绑定的语法与属性绑定类似。 但方括号中的部分不是元素的属性名,而由style前缀,一个点 (.)和 CSS 样式的属性名组成。 
数据流方向:从组件到元素。
形如:[style.style-property]
<button [style.color]="isSpecial ? 'red': 'green'">Red</button> <button [style.background-color]="canSave ? 'cyan': 'grey'">Save</button>
 
 虽然这是设置单一样式的好办法,但我们通常更喜欢使用 NgStyle指令 来同时设置多个内联样式。

5、 事件绑定:(事件名)
 数据流方向:从元素到组件。
 
事件绑定语法由等号左侧带圆括号的目标事件和右侧引号中的模板语句组成。 下面事件绑定监听按钮的点击事件。每当点击发生时,都会调用组件的onSave()方法。
<button (click)="onSave()">Save</button>
绑定会通过名叫$event的事件对象传递关于此事件的信息(包括数据值)。
 
事件对象的形态取决于目标事件。如果目标事件是原生 DOM 元素事件, $event就是 DOM事件对象,它有像target和target.value这样的属性。例如:
<input [value]="currentHero.name" (input)="currentHero.name=$event.target.value" >
如果事件属于指令(Angular中的指令),那么$event具体是什么由指令决定。 
双向数据流:
6、
双向数据绑定:[(...)]
使用[(ngModel)]双向绑定到表单元素。示例如下:
<!--通过ngModel指令,input元素的value初始值被设置为组件的currentHero.name的值,当用户输入不同的值时,又将改变组件的currentHero.name的值-->
<input [(ngModel)]="currentHero.name"> 

绑定目标和绑定源的区别:
绑定的目标是在=左侧的部分, 源则是在=右侧的部分。绑定的目标是绑定符:[]、()或[()]中的属性或事件名, 源则是引号 (" ") 中的部分或插值符号 ({{}}) 中的部分。
如果绑定的目标是指令中的成员则受到限制。 只能绑定到那些显式标记(使用@Input 和 @Output)或(在元数据的inputs或outputs数组中声明)为输入或输出的属性。示例如下:
 
//组件中的代码片断
// 
使用@Input 和 @Output标记
 @Input() hero:Hero;

@Output() deleteRequest = new EventEmitter<Hero>();
//或
元数据的inputs或outputs数组中声明
@Component({ inputs: ['hero'], outputs: ['deleteRequest'],}) 
 

//对应的组件模板中的片断
<hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)"></hero-detail>
 
四、 使用 EventEmitter 实现自定义事件
通常,我们通过指令(Angular中的指令,比如组件)使用EventEmitter 来创建并触发自定义事件。 创建的步骤如下:
1、创建一个EventEmitter实例,并且把它作为属性暴露出来。
2、调用EventEmitter.emit(payload)来触发事件,可以传入任何东西作为消息载荷。
示例如下:
//组件中的代码片断
deleteRequest = new EventEmitter<Hero>();//创建一个EventEmitter实例,并且把它作为属性暴露出来。
delete() { 
     
this.deleteRequest.emit(this.hero);//调用EventEmitter.emit(payload)来触发事件,可以传入任何东西作为消息载荷。
 
}
使用自定义事件的方法:指令通过绑定到这个属性来监听事件,并通过$event对象来访问载荷。示例如下:
<!--组件模板中绑定到这个属性来监听事件,并通过$event对象来访问载荷。当deleteRequest事件触发时,Angular 调用组件的deleteHero方法, 在$event变量中传入要删除的英雄-->
 <hero-detail (deleteRequest)="deleteHero($event)" [hero]="currentHero"></hero-detail>
 


更多模板语法请参见官网:https://angular.cn/docs/ts/latest/guide/template-syntax.html#

*** 转载请注明本文地址:http://www.zhikeji.top/blogs/blog/230/ ***

上一篇:Ubuntu中升级Angular-cli的步骤
下一篇:Angular实例之动画基础