css: div posizionato in modo assoluto con una dimensione errata in un genitore

Question

Sto cercando di inserire un'immagine (sprite-sheet in realtà) all'interno di una griglia css.
Per poter animare in CSS il foglio sprite, devo definire la sua posizione come "assoluta". Sono riuscito a duplicare il mio problema in un codice molto semplice:

per prima cosa ho un componente sprite-sheet che contiene il componente sprite-sheet e compo-image che dovrebbe deridere un altro componente che contiene questo sprite-sheet

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-immagine.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

componente-con-immagine.css

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

Quindi ho provato a visualizzare questa immagine nella mia app:

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%;
}

Ma questo è quello che ho ottenuto:

Fantastico, questo è successo perché la mia immagine posizionata in modo assoluto era relativa al componente radice perché non ho specificato le posizioni per gli altri componenti.

Quindi ho aggiunto un componente wrapper chiamato sprite-sheet2 per avere una posizione "relativa" e ospitare il vero componente sprite-sheet.

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>

Ma poi ottengo questo:

Tutto ciò che è sopra sprite-sheet2 ha larghezza e altezza definite ma sprite-sheet2 e tutto ciò che contiene hanno dimensioni 0x0, anche se questi componenti hanno larghezza e altezza = 100%.

Che cosa sto facendo di sbagliato?

Answer 1

I componenti angolari hostnon hanno una visualizzazione predefinita, display:blockquindi è necessario assegnarla da soli.

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

ma è possibile impostare l'impostazione in angular.json per assegnare la visualizzazione predefinita per i nuovi componenti generati con il ng g c XXXXcomando.

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

problema correlato:

Blocco di visualizzazione CSS in stile predefinito componente angolare