ngStyle nasıl uygulanır: bileşende ana makine öğesi?

Question

Böyle bir şey var:

import { Component, OnInit, Input } from '@angular/core'; 

@Component({ 
    selector: 'column', 
    template: '<ng-content></ng-content>' 
}) 
export class ColumnComponent { 

    @Input() columnWidth: string = '0';   

    constructor() {} 
} 

ve ben böyle bir şey yapmak için,

<ng-content></ng-content> 

ebeveyn elemana[ngStyle] olarak, tesisi columnWidth uygulamak istiyorum:

<div [ngStyle]="{'width': columnWidth+'px'}" > .... 

Stili ana makine öğesine nasıl uygulayacağımı biliyorum:

Ancak parametrelere geçiş yapmayı bilmiyorum.

Answer 1

Bunu yapmanın bir yolu yoktur. Ne yapabilirsiniz

ana sınırlama width bölümü sabittir ve bir değişkenden kullanılamaz olmasıdır

@HostBinding('style.width') 
width:string = '10px'; 

veya

@HostBinding('style.width.px') 
width:number = '10'; 

olduğunu.

tam esneklik ile bir başka yolu

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

setStyles() { 
    this.renderer.setElementStyle(this.elRef.nativeElement, 'width', '10px'); 
}