Странное поведение в редактируемом div при попытке обновить переменную с текстовым содержимым в редактируемом div в angular.Есть объяснения? - PullRequest
Новая
       6

Странное поведение в редактируемом div при попытке обновить переменную с текстовым содержимым в редактируемом div в angular.Есть объяснения?

1 голос
/ 22 марта 2019

Я пытаюсь создать текстовый редактор и создал пользовательский элемент в угловых, используя редактируемый div.

В некоторых случаях мне нужно будет установить некоторое начальное значение для содержимого div и в некоторых случаях записать напечатанные данные в div.

Но я получаю три разных поведения для одного и того же div в зависимости от установленного начального значения.

Я хочу, чтобы div вел себя как обычное поле ввода, но я не хочу использовать фактический элемент Input.

Я сделал рабочий пример проблемы в демонстрационной версии Stackblitz .

Код компонентов приведен ниже.

Шаблон HTML для компонента элемента: 

<div contentEditable='true' (input)="update($event)">{{value}}</div>
<p>{{value}}</p>

Файл машинописного текста для элемента компонента: 

import { Component, Input } from '@angular/core';

@Component({
  selector: 'element',
  template: `<div contentEditable='true' (input)="update($event)">{{value}}</div>
    <p>{{value}}</p>
`,
  styleUrls: ['./element.component.css']
})
export class ElementComponent {
  @Input() value: string;

  update(event) {
    this.value = event.target.innerText;
  }
}

CSS: 

div{
  background: black;
  margin: auto;
  color:white;
  font-size: 2em;
}

Три различных поведения:

  1. Если вы не установите начальное значение в поле ввода значения, как вы введите div, текст будет добавлен к себе непрерывно.
  2. Если вы вводите начальное значение в поле ввода значения при вводе в элементе div курсор сбрасывает его в исходное положение.
  3. Предоставляете ли вы исходный текст или вводите что-то в пустой div, если вы выделите весь текст из div и нажмете delete или backspace и начать печатать в нем. Он ведет себя как обычное текстовое поле.

Я ожидаю третьего поведения, например, после того, как вы очистите элемент, как он ведет себя.

1 Ответ

1 голос
/ 22 марта 2019

Возможное объяснение: вы не объявили связанное значение.

Обход: Добавление:

[textContent]="model" при объявлении шаблона div

  model;
  ngOnInit(){
    this.model = this.value;
  }

внутри ElementComponent класс экспорта

Демонстрация Stackblitz

Связанный: Как использовать [(ngModel)] на предметах div, подлежащих удовлетворению в angular2? , https://github.com/KostyaTretyak/ng-stack/tree/master/projects/contenteditable

...