Angular2でDOMにアクセスする

スポンサーリンク

Angular2でのDOMへのアクセス方法について紹介します。

ElementRef

ElementRef というクラスを介してDOMにアクセスできます。
ElementRef.nativeElement プロパティでネイティブのDOMを参照します。

import { Component, ElementRef } from 'angular2/core';

@Component({
    selector: 'my-element',
    template: </span>
    <span class="o"><</span><span class="nx">button</span> <span class="p">(</span><span class="nx">click</span><span class="p">)</span><span class="o">=</span><span class="s2">"onClick()"</span><span class="o">></span><span class="nx">click</span> <span class="nx">me</span><span class="o">!<</span><span class="sr">/button</span><span class="err">>
</span>    <span class="o"><</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"box1"</span><span class="o">></span><span class="nx">foo</span><span class="o"><</span><span class="sr">/div</span><span class="err">>
</span>    <span class="o"><</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"box2"</span><span class="o">></span><span class="nx">bar</span><span class="o"><</span><span class="sr">/div</span><span class="err">>
</span>    <span class="o"><</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"box3"</span><span class="o">></span><span class="nx">baz</span><span class="o"><</span><span class="sr">/div</span><span class="err">>
</span>    <span class="err">,
})

export class MyElement {
    private _el: HTMLElement;

    constructor(el: ElementRef) {
        this._el = this.el.nativeElement;
    }

    onClick() {
        this._el.querySelectorAll('.box2').style.backgroundColor = 'red';
    }
}

この例では、buttonをクリックすると、.box2 の背景が赤色になります。

ElementRefをimportして、constructor での引数elとしてメンバーに追加しています。
el.nativeElement 自体は、 <my-element> を参照しています。

あとは、querySelectorgetElementsByTagName などDOMの取得方法で各要素を走査できます。

BrowserDomAdapter

BrowserDomAdapter というクラスを介してもDOMにアクセスできます。
ElementRef はコンポーネントへ直接アクセスするのに対して、
BrowserDomAdapter はDocumentルートからの参照という点で異なります。

appendChild などのおなじみのメソッドの他に、 query, addClass など使いやすいAPIがあります。

import { Component } from 'angular2/core';
import { BrowserDomAdapter } from 'angular2/platform/browser';

@Component({
    selector: 'my-component',
    template: </span>
    <span class="o"><</span><span class="nx">button</span> <span class="p">(</span><span class="nx">click</span><span class="p">)</span><span class="o">=</span><span class="s2">"onClick()"</span><span class="o">></span><span class="nx">click</span> <span class="nx">me</span><span class="o">!<</span><span class="sr">/button</span><span class="err">>
</span>    <span class="o"><</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"box1"</span><span class="o">></span><span class="nx">foo</span><span class="o"><</span><span class="sr">/div</span><span class="err">>
</span>    <span class="o"><</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"box2"</span><span class="o">></span><span class="nx">bar</span><span class="o"><</span><span class="sr">/div</span><span class="err">>
</span>    <span class="o"><</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"box3"</span><span class="o">></span><span class="nx">baz</span><span class="o"><</span><span class="sr">/div</span><span class="err">>
</span>    <span class="err">
})

export class ListItemComponent {

    @Input() chat: Chat;

    private dom: BrowserDomAdapter;

    constructor () {
        this.dom = new BrowserDomAdapter();
    }

    onClick() {
        this.dom.addClass(this.dom.query('.box2'), 'active');
    }

}