如何在Angular2中使用不带ngModel的双向绑定编写自定义指令

Question

In angular2, how to write custom directive with two way binding, and I don't want to use naModel for data binding.

Currently, I want to implement a function that when mouse enter or leave a div, the directive will also modify the binding object. And the following is my code:

Directive:

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

Component:

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>

And I want to change the value of showDetail when mouse enter or leave the li tag.

Many thanks!

Answer 1

You can make the showDetail an object instead of a boolean , and then change that object's property. Notice you don't even need to mark the attribute as output (the () 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:

@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
  }
}

Check demo plunker here .