Двустороннее связывание не работает на примитивном объекте с угловым 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

В случае, если вы используете объект, это не является обязательным, а изменить обнаружение.

Необходимо создать @Output объект с типом EventEmitter и назвать rowHoverChange и вручную испускать новые значения.

Посмотрите, как связывание осуществляется 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); 
    } 
}