CSS: Absolut positioniertes Div mit einer falschen Größe in einem Elternteil

Question

Ich versuche, ein Bild (eigentlich Sprite-Sheet) in ein CSS-Raster einzufügen.
Um das Sprite-Sheet css-animieren zu können, muss ich seine Position als 'absolut' definieren. Ich habe es geschafft, mein Problem in einem sehr einfachen Code zu duplizieren:

Zuerst habe ich eine Sprite-Sheet-Komponente, die das Sprite-Sheet und die Compo-Image-Komponente enthält, die eine andere Komponente verspotten soll, die dieses Sprite-Sheet enthält

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')
}

component-with-image.ts

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

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

component-with-image.html

component-with-image.css

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

Dann habe ich versucht, dieses Bild in meiner App anzuzeigen:

component-with-image.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%;
}

Aber das habe ich bekommen:

cool, dies geschah, weil mein absolut positioniertes Bild relativ zur Stammkomponente war, weil ich keine Positionen zu den anderen Komponenten angegeben habe.

Also habe ich eine Wrapper-Komponente namens Sprite-Sheet2 hinzugefügt, um eine 'relative' Position zu haben und die echte Sprite-Sheet-Komponente zu hosten.

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>

Aber dann verstehe ich das:

Alles über Sprite-Sheet2 hat eine definierte Breite und Höhe, aber Sprite-Sheet2 und alles, was es enthält, hat eine Größe von 0x0, obwohl diese Komponenten eine Breite und Höhe von 100% haben.

Was mache ich falsch?

Answer 1

Winkelkomponenten hosthaben keine Standardanzeige, display:blockdaher müssen Sie sie selbst zuweisen.

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

Sie können die Einstellung jedoch in angle.json festlegen, um die Standardanzeige für neue Komponenten zuzuweisen, die mit dem ng g c XXXXBefehl generiert wurden .

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

verwandtes Problem:

Standard-CSS-Anzeigeblock für Winkelkomponenten