我有“SaleStay.Engult.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>

我的组件“SaleActudio.Test.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; }
}

干得好!
但我认为最好的做法是使用属性指令。是这样吗?
我就这样改了密码:
模板“SaleMist.Engult.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>

组件“SaleStay.Test.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];
    }
}

增加了“Stalist.Pr.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”的值被定义到
我尝试将值传递到模板from指令
我试过了,但就是做不到。
如何将值从指令传递到模板中?
有更好的方法吗?

最佳答案

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

(未测试)。

09-25 16:46
查看更多