如何在Angular 2中切换contenteditable元素true或false

前端之家收集整理的这篇文章主要介绍了如何在Angular 2中切换contenteditable元素true或false前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
使用按钮调用切换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
}

Plunker Demo

原文链接:https://www.f2er.com/angularjs/240405.html

猜你在找的Angularjs相关文章