Angular2-指令。 如何將指令中的值傳遞給模板？

Question

我有模板“ starrating.component.html”

<ng-container *ngFor="let star of arrayStarts">
    <span class="glyphicon star" aria-hidden="true"
          [class.glyphicon-star-empty]="activeStar>=star? false : true"
          [class.glyphicon-star]="activeStar<star ? false : true"
          (click)="clickStar(star)"
          (mouseleave)="mouseleaveStar(star)"
          (mouseover)="mouseoverStar(star)" >
    </span>
</ng-container>

我有組件“ starrating.component.ts”

import { Component } from '@angular/core';
@Component({
    selector: 'star-rating',
    templateUrl: 'app/starrating/templates/starrating.component.html',
    styleUrls: ['app/starrating/css/style.css']
})

export class StarRatingComponent {
    public arrayStarts;
    public activeStar;
    public selectedStar;
    constructor() {
        this.arrayStarts = [1, 2, 3, 4, 5];
        this.activeStar = 0;
        this.selectedStar = -1;
    }
    mouseoverStar = function (star) {this.activeStar = star;}
    mouseleaveStar = function (star) {this.activeStar = this.selectedStar || 0;}
    clickStar = function (star) { this.selectedStar = star; }
}

好作品！ 但我認為最佳做法是使用Attribute指令。 是這樣嗎？ 我像這樣更改代碼：模板“ starrating.component.html”

<ng-container *ngFor="let star of arrayStarts">
    <span class="glyphicon star" aria-hidden="true"
          [starHighlight]="star" 
          [class.glyphicon-star-empty]="activeStar>=star? false : true"
          [class.glyphicon-star]="activeStar<star ? false : true"
          >
    </span>
</ng-container>

組件“ starrating.component.ts”

import { Component } from '@angular/core';
@Component({
    selector: 'star-rating',
    templateUrl: 'app/directives/starrating/templates/starrating.component.html',
    styleUrls: ['app/directives/starrating/css/style.css']
})
export class StarRatingComponent {
    public arrayStarts;
        this.arrayStarts = [1, 2, 3, 4, 5];
    }
}

添加了指令代碼“ starrating.directive.ts”

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

    @Directive({ selector: '[starHighlight]'})

    export class StarHighlightDirective {

        constructor(private el: ElementRef, private  renderer: Renderer) { }

        private _selectedStar = -1;
        private _activedStar = 0;

        @Input('starHighlight') star: any;
        @Input('activeStar') activeStar: any;

        @HostListener('mouseenter') onMouseEnter() {this._activedStar = this.star;}
        @HostListener('click') onMouseCick() { console.log('onMouseCick: set star:', this.star);}
        @HostListener('mouseleave') onMouseLeave() { this._activedStar = this._selectedStar || 0;  }
 }

Perfect工程將事件納入指令（click，mouseenter和mouseleave）。

當更改變量“ activeStar”的值時，應該更改span元素。 像那樣：

[class.glyphicon-star-empty]="activeStar>=star? false : true"

但是現在變量“ activeStar”的值已定義到指令中，並且我嘗試將值從嘗試的指令傳遞到模板中，但我做不到。

如何將指令中的值傳遞給模板？ 有更好的方法嗎？

Answer 1

如果指定exportAs ，則可exportAs模板變量分配引用並像

@Directive({ selector: '[starHighlight]', exportAs: 'activeStar'})

<span class="glyphicon star" aria-hidden="true"
      #ref="activeStar"
      [starHighlight]="star" 
      [class.glyphicon-star-empty]="ref.activeStar >= star? false : true"
      [class.glyphicon-star]="ref.activeStar < star ? false : true"
      >
</span>

（未經測試）。