मैं एक कोणीय 6 cli जनरेटेड प्रोजेक्ट पर कोणीय फ्लेक्स-लेआउट के साथ एक नाटक कर रहा हूं और कॉलम लेआउट में उपलब्ध ऊंचाई को भरने के लिए राउटर-आउटलेट प्राप्त करने में कठिन समय हो रहा है।

मेरे रूट ऐप घटक मार्कअप में मेरे पास निम्न है:

<div fxLayout="column" fxFlex>
  <app-header-bar></app-header-bar>
  <div fxFlexFill>
    <router-outlet></router-outlet>
  </div>
  <app-navbar></app-navbar>
</div>

जो इस प्रकार प्रस्तुत करता है:

enter image description here

मेरे राउटर-आउटलेट वाला डिव सभी उपलब्ध स्थान को नहीं भर रहा है क्योंकि मैं ऊपर की छवि पर पीले छायांकित क्षेत्र के अनुसार व्हाट्सएप के साथ समाप्त होता हूं।

मैंने height:100% को html और body तत्वों पर लागू करने का प्रयास किया है, लेकिन इससे कोई फर्क नहीं पड़ता।

मैंने पहले एक पुराने कोणीय 1.x प्रोजेक्ट में कोणीय-सामग्री का उपयोग किया है, इसलिए मैं उनके द्वारा उपयोग किए जाने वाले विशिष्ट फ्लेक्स विशेषता दृष्टिकोण से परिचित हूं, लेकिन मुझे यह स्वीकार करना होगा कि मुझे काम करने के लिए फ्लेक्स-लेआउट लाइब्रेरी थोड़ी अधिक चुनौतीपूर्ण लगी है।

क्या किसी और को भी इसी तरह के मुद्दों का सामना करना पड़ा है? मुझे ऐसा लग रहा है कि मैंने कुछ स्पष्ट याद किया है!

धन्यवाद

1
mindparse 15 जून 2018, 18:32

1 उत्तर

सबसे बढ़िया उत्तर

ये कोशिश करें:

<div fxLayout="column" fxFlexFill>
  <app-header-bar></app-header-bar>
  <div fxFlex>
    <router-outlet></router-outlet>
  </div>
  <app-navbar></app-navbar>
</div>

styles.scss

html,
body {
    margin: 0;
    padding: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}

यह तब तक काम करना चाहिए जब तक कॉलम शरीर का सीधा बच्चा है। यदि नहीं, तो कृपया एक कोडपेन या ऐसा कुछ बनाएं जहां हम कुछ देख सकें।

उम्मीद है की वो मदद करदे!

2
kashpatel 15 जून 2018, 20:49