css: div positionné absolu ayant une taille incorrecte dans un parent

Question

J'essaye de mettre une image (en fait une feuille de sprite) dans une grille css.
Afin de pouvoir animer css la feuille de sprite, je dois définir sa position comme «absolue». J'ai réussi à dupliquer mon problème dans un code très simple:

J'ai d'abord un composant de feuille de sprite qui contient le composant de feuille de sprite et d'image de compo qui devrait se moquer d'un autre composant qui contient cette feuille 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')
}

composant-avec-image.ts

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

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

composant-avec-image.html

composant-avec-image.css

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

Ensuite, j'ai essayé d'afficher cette image dans mon application:

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

Mais voici ce que j'ai:

cool, cela s'est produit parce que mon image positionnée absolue était relative au composant racine car je n'ai pas spécifié de positions pour les autres composants.

J'ai donc ajouté un composant wrapper appelé sprite-sheet2 pour avoir une position «relative» et héberger le véritable composant 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>

Mais alors je comprends ceci:

Tout ce qui se trouve au-dessus de sprite-sheet2 a une largeur et une hauteur définies mais sprite-sheet2 et tout ce qu'il contient ont une taille 0x0, même si ces composants ont une largeur et une hauteur = 100%.

Qu'est-ce que je fais mal?

Answer 1

Les composants angulaires hostn'ont pas d'affichage par défaut, display:blockvous devez donc l'attribuer vous-même.

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

mais vous pouvez définir le paramètre dans angular.json pour attribuer un affichage par défaut aux nouveaux composants générés avec la ng g c XXXXcommande.

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

Problème connexe:

Bloc d'affichage CSS de style par défaut de composant angulaire