css: एक माता-पिता में गलत आकार होने की पूर्ण स्थिति वाली div

Question

मैं एक सीएसएस-ग्रिड के अंदर एक छवि (स्प्राइट-शीट वास्तव में) डालने की कोशिश कर रहा हूं।
स्प्राइट-शीट को सीएसएस-चेतन करने में सक्षम होने के लिए, मुझे इसकी स्थिति को 'निरपेक्ष' के रूप में परिभाषित करना होगा। मैं एक बहुत ही सरल कोड में अपनी समस्या की नकल करने में कामयाब रहा:

पहले मेरे पास स्प्राइट-शीट कंपोनेंट है जो स्प्राइट-शीट और कम्पो-इमेज कंपोनेंट को रखता है, जो इस स्प्राइट-शीट को रखने वाले दूसरे कंपोनेंट को मॉक करना चाहिए।

sprite-sheet.component.ts:

import { Component } from '@angular/core';

    @Component({
      selector: 'sprite-sheet',
      styleUrls: ['./sprite-sheet.component.scss'],
      templateUrl: './sprite-sheet.component.html',
    })
    export class SpriteSheetComponent {
      constructor() {
      }
    }

sprite-sheet.component.html

<div></div>

sprite-sheet.component.css

:host {
  height: 100%;
  width: 100%;
}

div
{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-repeat: no-repeat !important;
  background-position-x: 0%;
  background-image: url('/assets/icon/favicon.png')
}

घटक-साथ-image.ts

import { Component } from "@angular/core";

@Component({
    selector: 'compo-image',
    templateUrl: `./component-with-image.html`,
    styleUrls: ['./component-with-image.css']
})
export class ComponentWithImage {
}

घटक-साथ-छवि। html

घटक-साथ-image.css

div {
    height: 100%;
    width: 100%;
}

फिर मैंने अपने ऐप में इस छवि को प्रदर्शित करने का प्रयास किया:

घटक-साथ-छवि। html

<div>
  some-text
</div>
<div> <!-- should be a css grid -->
  <compo-image></compo-image>
</div>

app.component.css

div {
    width: 100px;
    height: 100px;
}

compo-image {
    width: 100%;
    height: 100%;
}

लेकिन यह है कि मुझे क्या मिला:

शांत, यह इसलिए हुआ क्योंकि मेरी निरपेक्ष स्थिति की छवि रूट घटक के सापेक्ष थी क्योंकि मैंने अन्य घटकों को स्थान निर्दिष्ट नहीं किया था।

इसलिए मैंने स्प्राइट-शीट 2 नामक एक आवरण घटक को एक 'सापेक्ष' स्थिति में जोड़ा और वास्तविक स्प्राइट-शीट घटक की मेजबानी की।

sprite-sheet.component2.ts

import { Component } from '@angular/core';

@Component({
  selector: 'sprite-sheet2',
  styleUrls: ['./sprite-sheet.component2.scss'],
  templateUrl: './sprite-sheet.component2.html',
})
export class SpriteSheetComponent2 {
  constructor() {
  }
}

sprite-sheet.component2.ts

:host {
    position: relative;
    height: 100%;
    width: 100%;
}

sprite-sheet {
    height: 100%;
    width: 100%;
}

sprite-sheet2.component2.html

<sprite-sheet></sprite-sheet>

लेकिन फिर मुझे यह मिलता है:

स्प्राइट-शीट 2 के ऊपर सब कुछ चौड़ाई और ऊंचाई को परिभाषित किया गया है, लेकिन स्प्राइट-शीट 2 और इसमें जो कुछ भी है, उसका 0x0 आकार है, भले ही इन घटकों की चौड़ाई और ऊंचाई = 100% हो।

मैं क्या गलत कर रहा हूं?

Answer 1

कोणीय घटकों hostमें डिफ़ॉल्ट डिस्प्ले नहीं होता है display:blockइसलिए आपको इसे स्वयं असाइन करने की आवश्यकता होती है।

:host {
    display: block; // or anything else
    position: relative;
    height: 100%;
    width: 100%;
}

लेकिन आप ng g c XXXXकमांड के साथ उत्पन्न नए घटकों के लिए डिफ़ॉल्ट डिस्प्ले असाइन करने के लिए angular.json में सेटिंग कर सकते हैं ।

"schematics": {
    "@schematics/angular:component": {
      "displayBlock": true
   }
 }

संबंधित समस्या:

कोणीय घटक डिफ़ॉल्ट शैली सीएसएस डिस्प्ले ब्लॉक