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

作品不错!但我认为最好的做法是使用属性指令。是这样吗？我这样改变了我的代码:模板“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;  }
 }

在指令中完善工作事件(点击、鼠标输入和鼠标离开)。

当更改变量“activeStar”的值时，应该更改 span 元素。像那样:

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

但是现在变量“activeStar”的值被定义到我的指令中我尝试将值从指令传递到模板我尝试过，但我就是做不到。

如何将指令中的值传递到模板中？有没有更好的方法？

Answer 1

如果您指定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>

(未测试)。