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(); // ここで監視を終了
}
}
}
以下のように動作します。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES20xx),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント