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

    ×