AngularでDOMにアクセスする

AngularでDOMにアクセスする

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

テンプレート内のローカル変数を利用する

HTMLテンプレート内では #hoge="xxxx"の書式で、ローカル変数が使えます。

[html]

[/html]

この例では、form要素を送信時のlogin(f)でform要素を渡しています。
ちなみにngFormは、FormsModuleを利用するためのグルーピングに指定しています。

また、属性値なしでも利用できます。

[html]

[/html]

  • Template reference variables – angular.io

    ElementRef

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

    [js]
    import { Component, ElementRef } from ‘angular2/core’;

    @Component({
    selector: ‘my-element’,
    template: `

    foo
    bar
    baz

    `,
    })
    export class MyElement {
    private _el: HTMLElement;

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

    onClick() {
    this._el.querySelectorAll(‘.box2’).style.backgroundColor = ‘red’;
    }
    }
    [/js]

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

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

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

    確認してみましょう

    コンポーネントの親子関係をまたいでDOMを取得する場合、
    すぐに複雑化して収集がつかなくなる可能性があるため、
    全体のアプリケーションの開発設計を見直してみましょう。

    DOMを直接参照・書き換えるのではなく、Angularアプリケーションでデータを管理して、
    各コンポーネントのテンプレートでデータバインディングするほうがスマートな場合がほとんどです。

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。 また、Udemyのプログラミング解説の講師、writer.appの自主開発や上越TechMeetupの主催などを行っています。

プロフィール

©Copyright 2020 Yohei Isokawa All Rights Reserved.