Componentのhostプロパティでルート要素にイベントを設定する
Componentのルート要素にイベントを設定するには Component のhostプロパティに設定を行います。
イベントとメソッドをオブジェクトとして定義します。引数に$event.targetを指定することでイベントオブジェクトを引き渡すこともできます。
@Component({
selector: 'greet',
template: 'Hello {{name}}!',
host: {
'(click)': 'onClick($event.target)',
}
})
class Greet {
name: string = 'World';
onClick(e){
e.style.background='red';
}
}hostプロパティはイベント以外にもclass属性や属性などを指定することができます。
@Component({
selector: 'greet',
template: 'Hello {{name}}!',
host: {
'(click)': 'onClick($event.target)',
'[class.valid]': 'valid',
'role': 'button',
}
})参考URL
host property - DirectiveMetadata class - angular2 library - Dart API
登録日 : 2017年01月29日 最終更新日 : 2017年1月29日