Question

我有模板“starrating.component.html”

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.ts”

<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.html”

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

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

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

将完美的工作事件导入指令（click，mouseenter和mouseleave）。

更改变量“activeStar”的值时，应更改span元素。那样：

var allCanSee = TabPermissionController.GetTabPermissions(TabId, PortalId)
   .ToList().Any(pi => pi.RoleID == -1);

但现在变量“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>

（未经测试）。

Angular2-指令。如何将值从指令传递到模板中？

1 个答案: