语法
在angular2中:
- 单向绑定:从看到的目标绑定数据来源
(target) = “statement” - 单向绑定 :从数据来源绑定到目标:
{{expression}}
[target] = “expression”
bind-target = “expression” - 双向绑定: 数据来源与视觉端相互绑定:
[(target)] = “expression”
属性绑定(attribute binding):
<img [src]="heroImageUrl">
<img bind-src="heroImageUrl">
<span [attr.colspan] = "1+1"></span>
类绑定(class binding):
<div [class.special] = "isSpecial"></div>
//ngClass管理多个类
currentClass = {
'savable':false,
'modified':true,
'special':false
}
<div [ngClass] = "currentClass"></div>
样式绑定(style binding):
currentStyles= {
'font-style':this.canSave ? 'italic':'normal',
'font-weight':this.inUnchanged? 'bold':'normal',
'font-size':this.isSpecial?'24px':'12px'
}
<button [style.color]="isSpecial:'red':'green'"></button>
<button [style.background-color]="canSave?'cyan':'grey'"></button>
<button [ngStyle]="currentStyles"></button>
双向绑定
src/app/app.module.ts
import {FormsModule} from '@angular/forms'
@NgModule({
imports:[
FormsModule
]
})
src/app/app.component.ts
<input [(ngModel)] = "user.name">
事件绑定(event binding):
template:
<button (click)="onSave()"></button>
Component:
@Component({
...
})
export class AppComponent{
onSave():void{
...
}
}
又比如:
//template
<input (input)="getValue($event)"/>
//component
export class LearnComponent{
getValue($event){
console.log($event.target.value)
}
}
$event是DOM标准事件对象,target是每个DOM标准事件对象都有的属性,在这里就是input元素。但是这种方法让组件知道了太多模板信息。所以还有更好的做法。
模板引用:
//template
<input #box (input)="keyup(0)"/> //必须绑定一个事件
<p>{{box.value}}</p>
export class LearnComponent{}
//还可以这样
<input #box (keyup.enter)="onEnter(box.value)"/>
<p>{{value}}</p?
//component
export class LearnComponent{
value:""
onEnter(value:string){
this.value = value
}
}
条件绑定,循环绑定:
//template
<ul>
<li *ngFor="let hero of Heroes">{{hero}</li>
</ul>
//Component
Heroes = ['wind','rain','superman']
//template
<div class="showme" *ngIf="isShow">show</div>
//component
isShow:boolean = false
模板引用变量(#var):
<input type="text" #phone placeholder="phonenumber">
<button (click)="callPhone(phone.value)"></button>
输入属性@Input:
输入属性是一个带有@Input装饰器的属性。当他通过属性绑定的形式被绑定时,值会流入这个属性。与vue,react中的props属性用法类似。
//Component
import {Input} from '@angular/input'
@Component({})
export class LearnComponent{
@Input() name:string
}
//在另一个component中引入上面的组件
<app-learn [name]="superman"></app-learn> //superman流入到learncomponent的name属性当中
输出属性@Output:
输出属性是一个带有@Output装饰器的属性。这个属性几乎总是返回angular的EventEmitter。
当它通过事件绑定的形式被绑定时,值会“流出”这个属性。
类似于vue中的事件中通过emit向上级分发事件。
//Component
import {Output,Component} from '@angular/core'
@Component({})
export class LearnComponent{
@Output() sendMessage= new EventEmitter()
handleClick(){
this.sendMessage.emit('Hello World')
}
}
//template
<button (click)="handleClick()">sendMessage</button>
//另一个Component
import {Component} from '@angular/core'
@Component({})
export class OtherComponent{
getMessage($event){
console.log($event)
}
}
//另一个template
<app-learn (sendMessage)="getMessage($event)"></app-learn> //数据必须在$event中接收