मेरे पास कोणीय सामग्री के दाईं ओर नौसेना के साथ एक साधारण कोणीय पृष्ठ है। जब मैं ऐप-घटक पर सभी कोड लिखता हूं तो सबकुछ अपेक्षित काम करता है, नेवबार टूलबार और मुख्य पृष्ठ से अपेक्षा के अनुसार खुलता है।
देखें उम्मीद के मुताबिक डेमो
लेकिन जब मैंने ऐप-रूट को घटक में विभाजित करने की कोशिश की, तो साइड नेवी टूलबार पर तैरती है, न कि मोड = "साइड" के रूप में नेवबार को करना चाहिए।
देखें डेमो अपेक्षित नहीं है< /ए>

मैंने सीएसएस के साथ खेलने/fxFlex जोड़ने की कोशिश की लेकिन व्यवहार अभी भी वही है

मुझे यहां क्या समझ नहीं आ रहा है?

2
Ezri Y 18 पद 2018, 10:57

2 जवाब

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

जब आप अधिक घटक का उपयोग करते हैं, तो इसका मतलब है कि अधिक div अपना कोड रैप करें...

यह "अतिरिक्त" div mat-sidenav के सामान्य व्यवहार को परेशान करता है

enter image description here

तो चाल केवल <mat-sidenav> को मुख्य घटक (आपके मामले में sidenav-autosize-example) और नए घटक में डाली गई सामग्री (आपके मामले में <app-main-menu></app-main-menu>) को बाहर करना है।

साथ ही {a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:host()" rel="nofollow noreferrer">:host का इस्तेमाल sidenav-autosize-example css चाइल्ड कंपोनेंट की सामग्री को स्टाइल करने के लिए।

कार्य कोड देखें

<mat-sidenav-container class="example-container" fullscreen autosize>
  <app-toolbar></app-toolbar>
  <mat-sidenav #sidenav class="example-sidenav" mode="side" position="end" opened="true">
    <app-main-menu></app-main-menu>
  </mat-sidenav>
</mat-sidenav-container>
2
לבני מלכה 18 पद 2018, 11:49

मुझे लगता है कि यह कोणीय सामग्री तत्वों पदानुक्रम से संबंधित है।

जब आप कोई कॉम्पोनेंट बनाते हैं, तो एंगुलर चाइल्ड कंपोनेंट नाम के साथ पैरेंट कंपोनेंट और चाइल्ड कंपोनेंट के बीच एक और HTML टैग डालता है। नीचे दिए गए कोड को बदलकर, साइड एनएवी काम करता है।

चूंकि साइड एनएवी तत्व मूल तत्व अभिविन्यास को प्रभावित करता है, मुझे लगता है कि इसे <mat-sidenav-container> तत्व के ठीक बाद रखा जाना चाहिए।

<mat-sidenav-container class="example-container" fullscreen autosize>
 <app-toolbar></app-toolbar>
  <mat-sidenav #sidenav class="example-sidenav" mode="side" position="end" opened="true">
    <app-main-menu></app-main-menu>
  </mat-sidenav>
</mat-sidenav-container>
1
spartanroger 18 पद 2018, 11:40