Angular2：@HostBindingまたはhost：{}？

Question

コンポーネントの@HostBindingとhost属性の使用の間に大きな違いがあったかどうか（もしあれば、それは何か？）

私はアニメーションを使用していた間、私は（むしろ近い見て）これらのケースにあったので、私は自分自身にその質問をされている

：

@Component({ 
    selector: 'mycomponent', 
    animations: [ 
    trigger('myTransition', [ 
     state('inactive', style({ 
     backgroundColor: '#eee', 
     transform: 'scale(1)' 
    })), 
    state('active', style({ 
     backgroundColor: '#cfd8dc', 
     transform: 'scale(1.1)' 
    })), 
    transition('inactive => active', animate('100ms ease-in')), 
    transition('active => inactive', animate('100ms ease-out')) 
    ])], 
    host: { 
    '[@myTransition]': '', 
    }, 
}) 

OR

@Component({ 
    selector: 'mycomponent', 
    animations: [ 
    trigger('myTransition', [ 
     state('inactive', style({ 
     backgroundColor: '#eee', 
     transform: 'scale(1)' 
    })), 
    state('active', style({ 
     backgroundColor: '#cfd8dc', 
     transform: 'scale(1.1)' 
    })), 
    transition('inactive => active', animate('100ms ease-in')), 
    transition('active => inactive', animate('100ms ease-out')) 
    ])], 
}) 

export class MyComponent { 
    @HostBinding('@myTransition') get myTransition() { 
    return ''; 
    } 
} 

を私は、そのことが私の考えホストバインディングの新しい方法かもしれません。

あなたの助言と入力のために事前に感謝;）

Answer 1

どちらも同等です。デコレータが利用できないES5で
、あなたがhost: {}

Answer 2

を使用することができます公式のガイダンスはAngular style guide

ホストメタデータ対HostListener/HostBindingデコレータ

からHostListener/HostBinding

を好むことです

スタイル06-03 @HostListenerおよび@HostBindingを に置き換えることを検討してください。@Directiveおよび@Component deのホストプロパティコーナー。

あなたの選択は一貫していますか？

なぜですか？ @HostBindingに関連付けられたプロパティまたは@HostListenerに関連付けられた メソッドは、ディレクティブのクラス内にある単一の 内でのみ変更できます。ホストメタデータプロパティーを使用する場合は、 コントローラ内のプロパティ宣言、 とディレクティブに関連付けられたメタデータの両方を変更する必要があります。

しかし、角度/ material2プロジェクトsays to prefer "host"

ホストのバインディング

ではなく @HostBindingと@HostListenerのディレクティブの設定でホストオブジェクトを使用して好みます。これは、TypeScript がメソッドの型情報をデコレータで保持するためであり、 メソッドの引数の1つがネイティブイベントタイプの場合、この 保存された型情報は、ブラウザ以外の環境でランタイムエラーにつながる可能性がありますサーバー側のプレレンダリング）。