Wie benutzt man [(ngModel)] auf div's contenteditable in angular2?

NgModel erwartet, dass das gebundene element, um eine value Eigenschaft, die divs nicht haben. Das ist, warum Sie bekommen die No value accessor Fehler.

Können Sie Ihre eigenen Mietobjekt und event-binding mit der textContent Eigenschaft (statt value) und die input Veranstaltung:

import {Component} from 'angular2/core';
@Component({
  selector: 'my-app',
  template: `{{title}}
    <div contenteditable="true" 
     [textContent]="model" (input)="model=$event.target.textContent"></div>
    <p>{{model}}`
})
export class AppComponent {
  title = 'Angular 2 RC.4';
  model = 'some text';
  constructor() { console.clear(); }
}

Plunker

Ich weiß nicht, ob die input Veranstaltung wird unterstützt auf allen Browsern für contenteditable. Sie konnte immer binden einige Tastatur-event statt.

InformationsquelleAutor der Antwort Mark Rajcok

Arbeiten Plunkr hier http://plnkr.co/edit/j9fDFcaber die entsprechenden code.

Bindung an und aktualisieren Sie manuell textContent war nicht für mich arbeiten, es nicht handhaben Zeilenumbrüche (in Chrome eingeben, nach einem Zeilenumbruch springt der cursor wieder an den Anfang) aber ich war in der Lage, es zu bekommen Arbeit, indem Sie eine contenteditable Modell-Richtlinie aus https://www.namekdev.net/2016/01/two-way-binding-to-contenteditable-element-in-angular-2/.

Ich optimiert zu behandeln multi-line-plain-text (mit \ns, nicht <br>s) mit white-space: pre-wrapund aktualisierte es zu verwenden keyup statt blur. Beachten Sie, dass einige Lösungen zu diesem problem verwenden die input Ereignis, das nicht unterstützt in IE oder Edge auf contenteditable Elemente noch.

Hier der code:

Richtlinie:

import {Directive, ElementRef, Input, Output, EventEmitter, SimpleChanges} from 'angular2/core';

@Directive({
  selector: '[contenteditableModel]',
  host: {
    '(keyup)': 'onKeyup()'
  }
})
export class ContenteditableModel {
  @Input('contenteditableModel') model: string;
  @Output('contenteditableModelChange') update = new EventEmitter();

  /**
   * By updating this property on keyup, and checking against it during
   * ngOnChanges, we can rule out change events fired by our own onKeyup.
   * Ideally we would not have to check against the whole string on every
   * change, could possibly store a flag during onKeyup and test against that
   * flag in ngOnChanges, but implementation details of Angular change detection
   * cycle might make this not work in some edge cases?
   */
  private lastViewModel: string;

  constructor(private elRef: ElementRef) {
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes['model'] && changes['model'].currentValue !== this.lastViewModel) {
      this.lastViewModel = this.model;
      this.refreshView();
    }
  }

  /** This should probably be debounced. */
  onKeyup() {
    var value = this.elRef.nativeElement.innerText;
    this.lastViewModel = value;
    this.update.emit(value);
  }

  private refreshView() {
    this.elRef.nativeElement.innerText = this.model
  }
}

Verwendung:

import {Component} from 'angular2/core'
import {ContenteditableModel} from './contenteditable-model'

@Component({
  selector: 'my-app',
  providers: [],
  directives: [ContenteditableModel],
  styles: [
    `div {
      white-space: pre-wrap;

      /* just for looks: */
      border: 1px solid coral;
      width: 200px;
      min-height: 100px;
      margin-bottom: 20px;
    }`
  ],
  template: `
    <b>contenteditable:</b>
    <div contenteditable="true" [(contenteditableModel)]="text"></div>

    <b>Output:</b>
    <div>{{text}}</div>

    <b>Input:</b><br>
    <button (click)="text='Success!'">Set model to "Success!"</button>
  `
})
export class App {
  text: string;

  constructor() {
    this.text = "This works\nwith multiple\n\nlines"
  }
}

Nur getestet in Chrome und FF auf Linux so weit.

InformationsquelleAutor der Antwort tobek

Habe ich fummelte, um mit diesen Lösungen und wird verwenden Sie die folgende Lösung in meinem Projekt:

<div #topicTitle contenteditable="true" [textContent]="model" (input)="model=topicTitle.innerText"></div>

Ich lieber mit dem template Referenz-Variablen "$event" Zeug.

Link zum Thema:
https://angular.io/guide/user-input#get-user-input-from-a-template-reference-variable

InformationsquelleAutor der Antwort Flo