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: `
foobarbaz`,
})
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>を参照しています。あとは、
querySelectorやgetElementsByTagNameなどDOMの取得方法で各要素を走査できます。確認してみましょう
コンポーネントの親子関係をまたいでDOMを取得する場合、
すぐに複雑化して収集がつかなくなる可能性があるため、
全体のアプリケーションの開発設計を見直してみましょう。DOMを直接参照・書き換えるのではなく、Angularアプリケーションでデータを管理して、
各コンポーネントのテンプレートでデータバインディングするほうがスマートな場合がほとんどです。