@Componentデコレーターのhostパラメーターを使って、コンポーネント要素そのものに属性やイベントをバインドする方法を説明する。
※現在では、Web標準技術を利用したアプリ開発が広く普及し、そのためのフレームワークも多数存在しています。その中でも主流のフレームワークの1つである「Angular」を活用し、そのための知識を備えることには大きな意味があります。本連載は、Angularユーザーに向けて、その使いこなしTIPSを紹介するものです。なお、本連載は「Build Insider」で公開していた連載「Angular Tips」を同サイトおよび筆者の了解を得たうえで、本フォーラムに移行したものです。記事はBuild Insiderで公開した状態のまま移行しているため、用語統一などの基準が@ITの通常の記事とは異なる場合があります。
Angular 5以降。v5時点で執筆しました。
(テンプレート内の要素ではなく)コンポーネント要素そのものに属性やイベントをバインドするには、@Componentデコレーターのhostパラメーターを利用します。
例えば以下は、AppComponentコンポーネントに対して、以下の設定を施す例です。
*1 ドキュメントの主要なコンテンツであることを意味します。
具体的なコードを以下に示します。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<h1>Hello {{name}}</h1>`,
styleUrls: ['./app.component.css'],
// コンポーネント要素への設定
host: {
'(click)': 'onclick($event)',
'role': 'main',
'[class.tips]': 'true',
}
})
export class AppComponent {
name = 'Angular';
onclick(e: any) {
console.log(e.target);
}
}
サンプルを実行し、生成されたコードはブラウザーの開発者ツール(Chromeであれば[Elements]タブ)から確認できます。以下のように、コンポーネント要素にrole、styleなどの属性が付与されていること、ブラウザー画面上でコンポーネントの領域をクリックすると、ログが出力されることを確認してください。
<app-root role="main" _nghost-c0="" ng-version="5.2.3" class="tips">
<h1 _ngcontent-c0="">Hello Angular</h1>
</app-root>
hostパラメーターには、「属性名: 値」のハッシュ形式で付与したい属性を渡します。テンプレートに対するのと同じく、[class.tips]、(click)のようなバインド構文も利用できます。
処理対象:コンポーネント(Component) カテゴリ:基本
API:@Component|host カテゴリ:@angular > core > Component decorator(コンポーネントデコレーター)
Copyright© Digital Advantage Corp. All Rights Reserved.