2016-02-19 5 views
5

Я пытаюсь создать компонент кнопки в угловом 2. На хосте я должен установить динамически генерируемое имя класса css. (в зависимости от связанного свойства)nativeElement.classList.add() alternative

'[ngClass]' на хосте не работает.

Я читал, что с помощью elementRef.nativeElement.classList.add (значение) не является лучшим способом либо, потому что ClassList не поддерживается на webworkers (или около того)

Каковы мои наилучшие варианты для генерации класс динамически на хосте?

@Component({ 
    selector: '[md-button]', 
}) 
export class MdButton { 
    color_: string; 

    @Input 
    set color() { 
     this.color_ = value; 
     if (this.elementRef !== undefined) { 
      this.elementRef.nativeElement.classList.add('md-' + this.color_); 
     } 
    } 

    get color(): string { 
     return this.color_; 
    } 

    constructor(public elementRef: ElementRef){} 
} 
+1

'this.elementRef.nativeElement.className + = 'md-' + this.color_'? – dfsq

ответ

7
@Component({ 
    selector: '[md-button]' //, 
    // host: { '[class]': 'classList()' } 
}) 
export class MdButton { 
    color_: string; 

    // classList() { 
    // return 'md-' + this.color_; 
    // } 

    @Input 
    set color() { 
     this.color_ = value; 
     // if (this.elementRef !== undefined) { 
     // this.elementRef.nativeElement.classList.add('md-' + this.color_); 
     // } 

     this.renderer.setElementClass(this.elementRef, 'md-' + this.color_, true); 
    } 

    get color(): string { 
     return this.color_; 
    } 

    constructor(public elementRef: ElementRef, private renderer: Renderer2){} 
} 
+0

Спасибо @ günter-zöchbauer, но это оставляет проблему. При попытке установить '' класс 'myCustomClass' переопределяется 'md-accent'. Оба должны существовать. – BakGat

+0

Я обновил свой ответ. Я не совсем уверен, нужно ли передавать элемент 'elementRef' или' elementRef.nativeElement'. В недавнем обновлении он был изменен для некоторых/всех API-интерфейсов, и я не проверял его, если включен «Renderer», но я так думаю. –

+0

Спасибо, я попробую это позже сегодня. – BakGat

3

Благодаря Гюнтера я нашел решение. Это его код, но очищенный для всех, кто может использовать его в будущем.

private color_: string; 

@Input() 
set color(value: string) { 
    this.color_ = value; 

    this.renderer.setElementClass(this.elementRef, 'md-' + this.color_, true); 
} 

get color(): string { 
    return this.color_; 
} 

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