각도 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

사용 프리미티브를 구현하는 방법을 바인딩을 참조하십시오 : 나는 EventEmitter를 사용하여 내 프로젝트에,

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); 
    } 
}