Angular2 Template Syntax

1 simple binding

@Template({
inline:'<h1>{{myName}}</h1>'
})

　　

constructor() {
this.myName = 'Jackey';
}

2 local variables and event handler

@Template({
inline:'<h1>{{myName}}</h1>' +
'<input type="text" #newname/>' +
'<h3>{{newname.value}}</h3>'
})

当你在input输入东西的时候你会发现，h3标签里面的内容完全没有反应，为什么呢？因为没有触发watch



我们现在该怎么做呢？加个 keyup，搞掂。ps(#newname全是小写不能驼峰写法)

@Template({
inline:'<h1>{{myName}}</h1>' +
'<input type="text" #newname (keyup)/>' +
'<h3>{{newname.value}}</h3>'
})

在此基础上，我们在看一下angular2.0的事件是怎样的

@Template({
inline:'<h1>{{myName}}</h1>' +
'<input type="text" #newname (keyup)/>' +
'<h3>{{newname.value}}</h3>' +
'<button (click)="onClick(newname.value)">change value</button>'
})

class MyAppComponent {

constructor() {
this.myName = 'Jackey';
}

onClick(newName){
console.log(newName);
}
}

button的事件变成 '(click)="onClick(xxx)"',方法写到类里面就会自动绑上

3 属性绑定

@Template({
inline:'<h1>{{myName}}</h1>' +
'<input type="text" #newname (keyup)/>' +
'<h3 [style.color]="newname.value">{{newname.value}}</h3>' +
'<button (click)="onClick(newname.value)">change value</button>'
})

class MyAppComponent {

constructor() {
this.myName = 'Jackey';
}

onClick(newName){
console.log(newName);
}
}

　　use [style.color]='newname.value',enter 'red' and we will see the red in red