使用按钮调用切换contenteditable元素为true以编辑元素文本,并在完成编辑时将模糊切换到contenteditable元素为false！
如何在课堂上设置contenteditable为false！
import {Component} from 'angular2/core'
@Component({
selector: 'my-app',template: `
<h2 #el contenteditable="false" (blur)="text=el.textContent">
This Content is Editable
</h2>
<button (click)="toggleContenteditable()">Edit Text Content</button>
<hr/>
<p> Text Obj: {{text}}</p>
`
})
export class App {
text : string;
contenteditable:bool = false;
toggleContenteditable(){
this.contenteditable = !this.contenteditable;
}
}
您应该使用属性绑定attr.在contenteditable之前的前缀,然后在那里传递contenteditable变量.这将帮助您通过toggleContenteditable方法对contenteditable执行切换效果.
<h2 #el [attr.contenteditable]="contenteditable" (blur)="text=el.textContent">
同时将toggleContenteditable函数更改为以下.
toggleContenteditable(){
this.contenteditable = !this.contenteditable; //`this.` was missing in later assignment
}
