Jump to the content

Angular2でDOMにアクセスする

Angular2

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

ElementRef

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

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

@Component({
    selector: 'my-element',
    template: `
    <button (click)="onClick()">click me!</button>
    <div class="box1">foo</div>
    <div class="box2">bar</div>
    <div class="box3">baz</div>
    `,
})

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: `
    <button (click)="onClick()">click me!</button>
    <div class="box1">foo</div>
    <div class="box2">bar</div>
    <div class="box3">baz</div>
    `
})

export class ListItemComponent {

    @Input() chat: Chat;

    private dom: BrowserDomAdapter;

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

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

}

注目記事

最近の記事

ぼくが書いてます

イソップ

フロントエンドエンジニア

イソップ

ページの先頭に戻る

Search results

×