कोणीय 2

Question

में परिवर्तनीय से घटक शैली सेट करें मेरा लक्ष्य "शैली" विशेषता का उपयोग कर एक घटक चर से एक शैली (ऊंचाई और चौड़ाई) सेट करना है। मुझे लगता है कि होगा वहाँ एक सरल डेटा बाइंडिंग विधि है लेकिन यह है कि इच्छाधारी सोच हो सकता है ...

उदाहरण के लिए अगर मैं एचटीएमएल मूंछें यह बाध्यकारी उपयोग कर रहे थे इस प्रकार दिखाई देंगे:

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

जाहिर है यह सब है गलत लेकिन मैंने कुछ और संभावित क्रमिक प्रयासों की कोशिश की है और कोणीय साइट, स्टैक ओवरफ़्लो या Google पर समाधान खोजने में कोई भाग्य नहीं है। मुझे ngStyle इनलाइन का उपयोग करने के लिए कम किया जा सकता है लेकिन यह इस मामले में आदर्श नहीं है।

Answer 1

आप की तरह

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

मेजबान तत्व और सामग्री (app/Nav/sidebar.comp.html) की तरह

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

या

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