角度2のプリミティブオブジェクトで双方向の結合が機能しない

Question

角度2では、文字列のコンポーネントプロパティを入力ディレクティブパラメータにバインドしようとしています。 私は "箱のバナナ"を使用していても、双方向バインディングはプリミティブプロパティでは機能しないようです。

コンポーネント：

@Component({ 
    selector: "pairs-result", 
    template: ` 
    <ul class="search-list"> 
    <li [(rowHover)]="showDetail">{{showDetail}}<pair-row></pair-row></li> 
    </ul> 
    `, 
    directives: [HoverDirective] 
}) 
export class PairsComponent { 
    public showDetail: string = "initial value"; 
} 

指令：

@Directive({ 
    selector: '[rowHover]' 
}) 
export class HoverDirective { 
    @Input('rowHover') hover: any; 
    @HostListener('mouseenter') onMouseEnter() { 
    this.hover = "mouse enter"; 
    } 
    @HostListener('mouseleave') onMouseLeave() { 
    this.hover = "mouse leave"; 
    } 
} 

Code with Primitive not working

しかし、私は、オブジェクトのプロパティに文字列プロパティを "ホバー" 変更した場合、それが動作します。あなたがオブジェクトを使用する場合には

Code with Object works

Answer 1

、それは結合ではなく、検出を変更されていません。

タイプEventEmitterと名前rowHoverChangeの@Outputプロパティを作成し、手動で新しい値を出力する必要があります。

はプリミティブを使用してplunkr

Answer 2

を実装する方法をバインドを参照してください：

import { Directive, HostListener, Input, EventEmitter, Output } from '@angular/core'; 

@Directive({ 
    selector: '[rowHover]' 
}) 
export class HoverDirective { 

    @Input('rowHover') hover: any; 
    @Output() rowHoverChange = new EventEmitter(); 

    @HostListener('mouseenter') onMouseEnter() { 
    this.hover = "mouse enter"; 
    this.rowHoverChange.emit(this.hover); 
    } 
    @HostListener('mouseleave') onMouseLeave() { 
    this.hover = "mouse leave"; 
    this.rowHoverChange.emit(this.hover); 
    } 
}