Angular2でngModelを使用しない双方向バインディングでカスタムディレクティブを作成する方法

Question

angle2では、双方向バインディングでカスタムディレクティブを作成する方法と、データバインディングにnaModelを使用したくありません。

現在、私は、マウスがdivに入るかdivを離れるときに、その指示文がバインディングオブジェクトも変更する機能を実装したいと考えています。そして、次は私のコードです：

指令：

import { Directive, HostListener, Input } from '@angular/core'; 
@Directive({ 
    selector: '[rowHover]' 
}) 
export class HoverDirective { 

    @Input('rowHover') hover: boolean; 
    @HostListener('mouseenter') onMouseEnter() { 
    this.hover = true; 
    } 
    @HostListener('mouseleave') onMouseLeave() { 
    this.hover = false; 
    } 
} 

コンポーネント：

import {Component} from "@angular/core"; 
import {PairRowComponent} from './pair-row.component'; 
import {HoverDirective} from '../directives/pair-hover.directive'; 

@Component({ 
    selector: "pairs-result", 
    templateUrl: "./app/pairs/components/pairs.html", 
    directives: [PairRowComponent, HoverDirective] 
}) 
export class PairsComponent { 
    public showDetail: boolean = false; 
} 

HTML

<ul class="search-list"> 
    <li [(rowHover)]="showDetail">{{showDetail}}<pair-row></pair-row></li> 
    </ul> 

と私はshowDetailの値を変更したいときにマウス入力しますか、 liタグを残します。

多くの感謝！

Answer 1

booleanの代わりにshowDetailをオブジェクトにして、そのオブジェクトのプロパティを変更することができます。あなたも出力（() S）として属性をマークする必要はありません注意してください：

@Component({ 
    selector: "pairs-result", 
    template: ` 
    <ul class="search-list"> 
    <li [rowHover]="showDetail">{{showDetail.value}}<pair-row></pair-row></li> 
    </ul> 
    `, // ^^^^^^^^-- no need of (rowHover) ^^^^^^^^--- .value added here as well 
    directives: [HoverDirective] 
}) 
export class PairsComponent { 
    public showDetail: any = {value: false}; // property is now an object instead of a bool 
} 

指令：

@Directive({ 
    selector: '[rowHover]' 
}) 
export class HoverDirective { 
    @Input('rowHover') hover: any; 
    @HostListener('mouseenter') onMouseEnter() { 
    this.hover.value = true;      // <-- notice the .value here 
    } 
    @HostListener('mouseleave') onMouseLeave() { 
    this.hover.value = false;      // <-- notice the .value here 
    } 
} 

チェックdemo plunker here。