Wie wird ngStyle auf das Host-Element in der Komponente angewendet?

Question

Ich habe so etwas wie dies:

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

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

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

    constructor() {} 
} 

und ich möchte gelten Eigenschaft column zu [ngstyle] auf

<ng-content></ng-content> 

Elternelement, um so etwas zu tun:

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

Ich weiß, wie man Stil auf Host-Element anwenden:

aber ich weiß nicht, Parameter zu übergeben.

Answer 1

Es gibt keine Möglichkeit, dies zu tun.

Was Sie tun können, ist

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

oder

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

Die wichtigste Einschränkung ist, dass der width Teil fest ist und nicht von einer Variablen verwendet werden kann.

Eine weitere Möglichkeit, bei voller Flexibilität

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

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