Angular 2 で @HostBinding と @Input プロパティの力を引き出して、ワンランク上の開発者を目指す
Angular 2 で @HostBinding と @Input プロパティを組み合わせる方法
例：コンポーネントの背景色を変更する
この例では、isHovered という @Input プロパティを使用して、コンポーネントがマウスオーバーされているかどうかを追跡します。次に、@HostBinding を使用して、このプロパティに基づいてコンポーネントのホスト要素の背景色を設定します。
import { Component, Input, HostBinding } from '@angular/core';
@Component({
selector: 'my-component',
template: `
<div [style.backgroundColor]="backgroundColor">
{{ label }}
</div>
`
})
export class MyComponent {
@Input() label: string;
@Input() isHovered: boolean = false;
@HostBinding('style.backgroundColor')
get backgroundColor() {
return this.isHovered ? 'red' : 'white';
}
}
この例では、my-component コンポーネントに label と isHovered という 2 つの @Input プロパティがあります。label プロパティはコンポーネントに表示されるラベルテキストを設定し、isHovered プロパティはコンポーネントがマウスオーバーされているかどうかを追跡します。
@HostBinding('style.backgroundColor') デコレータは、backgroundColor プロパティをコンポーネントのホスト要素の style.backgroundColor プロパティにバインドします。get アクセサーは、このプロパティの値を返します。この場合、isHovered プロパティが true の場合は背景色が赤色に、そうでない場合は白色に設定されます。
注意点
@HostBindingは、コンポーネントのホスト要素のみをバインドできます。子コンポーネントにはバインドできません。@HostBindingを使用してプロパティをバインドする場合は、必ずそのプロパティに@HostBindingデコレータを指定する必要があります。
<my-component [label]="label" [isHovered]="isHovered"></my-component>
コンポーネント
import { Component, Input, HostBinding } from '@angular/core';
@Component({
selector: 'my-component',
template: `
<div [style.backgroundColor]="backgroundColor">
{{ label }}
</div>
`
})
export class MyComponent {
@Input() label: string;
@Input() isHovered: boolean = false;
@HostBinding('style.backgroundColor')
get backgroundColor() {
return this.isHovered ? 'red' : 'white';
}
}
使用方法
- このコードを
my-component.tsというファイルに保存します。 app.component.tsファイルで、MyComponentコンポーネントをインポートし、テンプレートで使用します。
import { Component } from '@angular/core';
import { MyComponent } from './my-component';
@Component({
selector: 'app-root',
template: `
<div>
<label>ラベル：</label>
<input type="text" [(ngModel)]="label">
</div>
<my-component [label]="label" [isHovered]="true"></my-component>
`
})
export class AppComponent {
label: string = 'デフォルトラベル';
}
- アプリケーションを実行します。
このコードを実行すると、my-component コンポーネントが表示されます。コンポーネントにマウスオーバーすると、背景色が赤色になります。
- コンポーネントのクラス属性または ID を制御するために
@HostBindingを使用します。 - コンポーネントのスタイルを動的に変更するために複数の
@HostBindingプロパティを使用します。 @Inputプロパティを使用して、コンポーネントの状態を外部から制御します。
@HostBinding を使用して、コンポーネントのホスト要素のクラス属性をバインドできます。これは、コンポーネントの状態に基づいてコンポーネントの外観を動的に変更する場合に役立ちます。
import { Component, Input, HostBinding } from '@angular/core';
@Component({
selector: 'my-component',
template: `
<div [class.active]="isActive">
{{ label }}
</div>
`
})
export class MyComponent {
@Input() label: string;
@Input() isActive: boolean = false;
@HostBinding('class.active')
get activeClass() {
return this.isActive;
}
}
@HostBinding('class.active') デコレータは、activeClass プロパティをコンポーネントのホスト要素の class 属性にバインドします。get アクセサーは、このプロパティの値を返します。この場合、isActive プロパティが true の場合は active クラスが追加され、そうでない場合は追加されません。
スタイルプロパティを直接バインドする
import { Component, Input, HostBinding } from '@angular/core';
@Component({
selector: 'my-component',
template: `
<div [style.width]="width">
{{ label }}
</div>
`
})
export class MyComponent {
@Input() label: string;
@Input() width: number = 200;
@HostBinding('style.width')
get styleWidth() {
return this.width + 'px';
}
}
@HostBinding('style.width') デコレータは、styleWidth プロパティをコンポーネントのホスト要素の style.width プロパティにバインドします。get アクセサーは、このプロパティの値を返します。この場合、width プロパティの値はピクセル単位で返されます。
カスタムディレクティブを作成する
@HostBinding と @Input プロパティを組み合わせるためのより複雑な方法として、カスタムディレクティブを作成する方法があります。これにより、コンポーネントのロジックをカプセル化し、再利用性を高めることができます。
例：highlight ディレクティブ
この例では、highlight というカスタムディレクティブを作成して、要素を強調表示します。このディレクティブは、@Input プロパティを使用して強調表示する色を受け取り、@HostBinding プロパティを使用して要素の背景色を設定します。
import { Directive, Input, HostBinding } from '@angular/core';
@Directive({
selector: '[highlight]'
})
export class HighlightDirective {
@Input() highlightColor: string;
@HostBinding('style.backgroundColor')
get backgroundColor() {
return this.highlightColor;
}
}
このディレクティブを使用するには、次のように要素に適用します。
<div highlight [highlightColor]="'#ff0000'">強調表示されたテキスト</div>
このコードを実行すると、要素の背景色が赤色になります。
angular
