Impostare lo stile del componente da variabile in Angular 2

Question

Il mio obiettivo è impostare uno stile (altezza e larghezza in questo caso) da una variabile componente utilizzando l'attributo "stili". Vorrei che ci sia un metodo semplice di dati vincolante, ma che può essere un pio desiderio ...

Per esempio, se dovessi usare lo lega baffi html potrebbe essere simile a questo:

@Component({ 
    selector: '[sidebar]', 
    templateUrl: 'app/Nav/sidebar.comp.html', 
    styles: [` 
     .sidebar-nav { 
      overflow: scroll; 
      height: {{ height }}; 
     } 
     .sidebar { 
      height: {{ 0.9 * height }}; 
      width: {{ 0.21 * width }}; 
     } 
    `] 
}) 

export class SidebarComp { 
    width: number; 
    height: number; 

    constructor() { 
     this.height = window.innerHeight; 
     this.width = window.innerWidth; 
    } 
} 

Ovviamente questo è tutto sbagliato ma ho provato alcune permutazioni più probabili e non ho avuto fortuna a trovare soluzioni sul sito Angular, Stack Overflow o Google. Posso essere ridotto all'utilizzo di ngStyle in linea ma non è l'ideale in questo caso.

Answer 1

È possibile lo stile dell'elemento ospite come

@Component({ 
    selector: '[sidebar]', 
    templateUrl: 'app/Nav/sidebar.comp.html', 
    host: { 
    '[style.height.px]':'0.9 * height', 
    '[style.width.px]':'0.21 * width' 
    } 

}) 

export class SidebarComp { 
    width: number; 
    height: number; 

    constructor() { 
     this.height = window.innerHeight; 
     this.width = window.innerWidth; 
    } 
} 

e il contenuto (app/Nav/sidebar.comp.html) come

<div class="sidebar-nav" [style.overflow]="'scroll'" [style.height.px]="height"> 

o

<div class="sidebar-nav" [ngStyle]="{overflow: 'scroll', height: height + 'px'}">