Bileşen stilini değişkenden ayarlayın Angular 2

Question

Amacım, "styles" özelliğini kullanarak bir bileşen değişkeninden bir stil (bu durumda yükseklik ve genişlik) ayarlamaktır. Ben basit bir veri bağlama yöntemi yoktur düşünürdüm ama bu gibi görünebilir onu bağlayıcı html bıyık kullanıyormuş o Örneğin

... hüsnükuruntu çekebilir: Açıkçası bu hepsi

@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; 
    } 
} 

Yanlış ama daha muhtemel permütasyonlar denedim ve Açısal site, Yığın Taşması veya Google'da çözüm bulma konusunda şansım olmadı. NgStyle satır içi kullanımına indirgenebilirim, ancak bu durumda ideal değil.

Answer 1

Sen

@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; 
    } 
} 

gibi ev sahibi elemanı ve

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

veya

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