css: div posicionado absoluto que tiene un tamaño incorrecto en un padre

Question

Estoy tratando de poner una imagen (hoja de sprites en realidad) dentro de una cuadrícula css.
Para poder animar en CSS la hoja de sprites, tengo que definir su posición como 'absoluta'. Logré duplicar mi problema en un código muy simple:

primero tengo un componente de hoja de sprite que contiene el componente de hoja de sprite y el componente de imagen compuesta que debería simular otro componente que contiene esta hoja de sprite

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

componente-con-imagen.ts

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

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

componente-con-imagen.html

componente-con-imagen.css

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

Luego intenté mostrar esta imagen en mi aplicación:

componente-con-imagen.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%;
}

Pero esto es lo que obtuve:

Genial, esto sucedió porque mi imagen de posición absoluta era relativa al componente raíz porque no especifiqué posiciones para los otros componentes.

Así que agregué un componente de envoltura llamado sprite-sheet2 para tener una posición 'relativa' y albergar el componente de hoja de sprite real.

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>

Pero luego me sale esto:

Todo lo que está arriba de sprite-sheet2 tiene un ancho y alto definidos, pero sprite-sheet2 y todo lo que contiene tienen un tamaño 0x0, aunque estos componentes tienen un ancho y alto = 100%.

¿Qué estoy haciendo mal?

Answer 1

Los componentes angulares hostno tienen una visualización predeterminada, display:blockpor lo que debe asignarla usted mismo.

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

pero puede establecer la configuración en angular.json para asignar la visualización predeterminada para los nuevos componentes generados con el ng g c XXXXcomando.

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

cuestión relacionada:

Bloque de visualización css de estilo predeterminado de componente angular