Question

我编写了一种所见即所得的代码。我有一个托管随机树div的div容器。

我知道如何使用MutationObserver来检测一个DOM元素中的更改，但是我找不到如何对所有许多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);
  }
}

是否有更好的配置，或者通过其他方式达到了我的目标？至少我需要：

新值
商品ID或商品路径或商品位置

Answer 1

如果您使用通过*ngFor的循环，则可以使用@ViewChildren装饰器来引用所有子代并将某些逻辑附加到它们。

前一段时间，我用corresponding stackblitz回答了一个问题。

最后，它就像viewChild一样工作，您只需要遍历每个nativeElement而不是一个。

能解决您的答案吗？

如何检测许多DOM元素中的更改

1 个答案: