2017-01-25 1 views
1

мне нужна директива, которая будет связывать динамическое значение для classListAngular2 Директива не читает данное значение

Директивы Элемент по

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

@Directive({ 
    selector: "[entityType]" 
}) 
export class EntityTypeDirective { 
    @Input() entityType: string; 

    constructor(el: ElementRef) { 
    var labelClass = { 
     C: "label-warning", 
     F: "label-info", 
     S: "label-success" 
    }; 
    el.nativeElement.classList = `label ${labelClass[this.entityType]}`; 
    } 
} 

Markup

<span [entityType]="item.type">...<span> 

Проблема

Директива связывает class="label undefined", поскольку entityType является undefined. item.type - это значение, исходящее от репитера *ngFor, который я хочу передать директиве.

Где я пошла не так?

ответ

3

Вы поступили не так в точке, где вы должны использовать ngOnInitlifecycle hook :). Это где @Input связывание завершается в угловых

@Directive({ 
    selector: "[entityType]" 
}) 
export class EntityTypeDirective implements OnInit { 
    @Input() entityType: string; 

    constructor(private el: ElementRef) {} 

    ngOnInit() { 
    let labelClass: any = { 
     C: "label-warning", 
     F: "label-info", 
     S: "label-success" 
    }; 
    this.el.nativeElement.classList = `label ${labelClass[this.entityType]}`; 
    } 
} 
Смежные вопросы