AngularでMutationObserverの使い方

2018.08.11

AngularでMutationObserverの使い方

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

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

コールバック関数の引数は以下の通りです。

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

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

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(); // ここで監視を終了
    }
  }
}

以下のように動作します。

AngularでMutationObserverの使い方

TypeScriptでMutationObserverの使い方

コメント

タイトルとURLをコピーしました