AngularでMutationObserverの使い方

2018/8/11 Angular, JavaScript

AngularでMutationObserverの使い方

MutationObserverの使い方を忘れるのでメモです。

引数はひとつで、コールバック関数です。このコールバック関数は、DOMが変更されたタイミングで実行されます。

コールバック関数の引数は

第一引数は、MutationRecord[]（省略可）
第二引数は、MutationObserver（省略可）

以下はMutationObserverインスタンス生成例です。

const mo = new MutationObserver((mr:MutationRecord[]) =>{
  console.log(mr.length);
});

const mo = new MutationObserver((mr:MutationRecord[]) =>{

console.log(mr.length);

});

このインスタンスにはobserve()メソッドがあり、このメソッドでDOMの変更検知をします。

observeの引数は

第一引数は、監視したいノード（Node）
第二引数は、オプション（参考サイト）

となります。

DOMが変更する種類はオプションで指定でき、例えば属性やスタイルなどが変わったらその変更検知をすることが可能です。

disconnect()というメソッドがあり、監視を終了させるメソッドです。

サンプル

このサンプルではMutationObserverはhref属性の変更を監視し検知します。

ボタンが配置してあり、ボタンをクリックしてhref属性を変更しています。その時に検知されるかどうかを確認しているだけです。

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

@Component({
  selector: 'app-root',
  template: `
  <button (click)='onclick()'>ボタン</button>
  <ul>
    <li>
      <h2><a target="_blank" href="https://angular.io/tutorial" id="sample">リンク</a></h2>
    </li>
  </ul>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit,OnDestroy{
  public mo = new MutationObserver((mr:MutationRecord[]) =>{
    alert(mr.length);
    console.log(mr);
  });

  private target:any;
  ngOnInit() {
    this.target = document.getElementById('sample');
    const opt:MutationObserverInit = {
      attributes: true,
      attributeFilter:['href']
    };
    this.mo.observe(this.target,opt); // ここでhrefを監視
  }

  onclick(){
    this.target.href = 'https://www.yahoo.co.jp/'; // hrefを変更する
  }

  ngOnDestroy(){
    if(this.mo){
      this.mo.disconnect(); // ここで監視を終了
    }
  }
}