Как обнаружить изменения во многих элементах DOM

Question

Я кодирую что-то вроде wysiwyg.У меня есть контейнер div, в котором размещается случайное дерево div.

Я знаю, как обнаружить изменения в одном элементе DOM с помощью MutationObserver, но я не знаю, как это сделать со всеми многими элементами DOM.

Лучший способ, который я нашел, - это использовать MutationObserver.Для конструктора нужен целевой элемент, поэтому я отправляю ему свой контейнер div.Если я получаю старое и новое значение, когда обнаруживается изменение, я не могу найти, какой это элемент.

--- doc.component.html

<div #container contenteditable='true'>

</div>

--- doc.component.ts

... 
@ViewChild('container') container: ElementRef;
...
ngOnInit() {
   const target = this.container.nativeElement;
   // Set DB data in template container div
   this.dataService.getData().then(data => {
      this.renderer2.setProperty(target, 'innerHTML', data);
   });
   const config = {
     attributes: true,
     characterData: true,
     childList: true,
     subtree: true,
     attributeOldValue: true,
     characterDataOldValue: true
  };
  this.changes = new MutationObserver(
     (mutations: MutationRecord[])=> {
        mutations.forEach((mutation: MutationRecord) => { 
          console.log(mutation);
        })
     };
  );
  this.changes.observe(target, config);
}

--- data.service.ts

...
jsonToHtml(json): string {
  ...
  return html;
   // expected output json: 
   { item: { id:'xxxx1', type: 'title', content: '------', sub:[]},
    item: { id:'xxxx2', type: 'paragraph', content: '------', sub:[]},
    item: { id:'xxxx3', type: 'paragraph', content: '------', sub:[]},
    item: { id:'xxxx4', type: 'paragraph', content: '------', sub:[
       item: { id:'xxxx4.1', type: 'comment', content: '------', sub:[ 
          item: { id:'xxxx4.1.1', type: 'image', content: img, sub:[]}
       ]}
    ]} }

  // expected output html :
  `<div id='xxxxx1' class='title'>
       <div class='content'>----------</div>
   </div>
   <div id='xxxxx2' class='paragraph'>
       <div class='content'>----------</div>
   </div>
   <div id='xxxxx3' class='paragraph'>
       <div class='content'>----------</div>
   </div>
   <div id='xxxxx4' class='paragraph'>
       <div class='content'>----------</div>
       <div id='xxxxx4.1' class='comment'>
            <div class='content'>----------</div>
            <div id='xxxxx4.1.1' class='image'>
                <div class='content'>---------</div>
             </div>
       </div>
   </div>`
}
getData(apiUrl): any{
  return this.apiService.get(apiUrl).then(data => {
     return this.jsonToHtml(data);
  }
}

Есть ли лучшая конфигурация или другой способ получить мою цель?По крайней мере, мне нужно:

• новое значение

• идентификатор элемента или путь элемента или позиция элемента

Answer 1

Если вы используете цикл через *ngFor, вы можете использовать декоратор @ViewChildren, чтобы ссылаться на все дочерние элементы и добавлять к ним некоторую логику.

Я недавно ответил на вопрос об этом с соответствующим стекабликом .

В конце концов, он работает как viewChild, вам просто нужно перебирать каждый nativeElement вместо одного.

Это решит ваш ответ?