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

发布时间：2020-12-17 10:17:16 所属栏目：安全来源：网络整理

导读：使用按钮调用切换contenteditable元素为true以编辑元素文本,并在完成编辑时将模糊切换到contenteditable元素为false！如何在课堂上设置contenteditable为false！ import {Component} from 'angular2/core'@Component({ selector: 'my-app',template: ` h2 #

使用按钮调用切换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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!