css: pozycjonowany absolutnie div o niewłaściwym rozmiarze w rodzicu

Jan 10 2021

Próbuję umieścić obraz (właściwie arkusz sprite) wewnątrz siatki css.
Aby móc animować css arkusz sprite, muszę zdefiniować jego pozycję jako „absolutną”. Udało mi się zduplikować mój problem w bardzo prostym kodzie:

najpierw mam komponent arkusza sprite, który zawiera arkusz sprite i komponent obrazu kompozycyjnego, który powinien udawać inny komponent, który przechowuje ten arkusz 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')
}

komponent-z-obrazem.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

komponent z obrazem.css

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

Następnie próbowałem wyświetlić ten obraz w mojej aplikacji:

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

Ale oto co mam:

fajnie, stało się tak, ponieważ mój bezwzględnie ustawiony obraz był względem głównego komponentu, ponieważ nie określiłem pozycji względem innych komponentów.

Dodałem więc komponent otoki o nazwie sprite-sheet2, aby mieć pozycję „względną” i hostować rzeczywisty komponent arkusza sprite.

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>

Ale wtedy rozumiem:

Wszystko powyżej sprite-sheet2 ma zdefiniowaną szerokość i wysokość, ale sprite-sheet2 i wszystko, co zawiera, ma rozmiar 0x0, mimo że te komponenty mają szerokość i wysokość = 100%.

Co ja robię źle?

Odpowiedzi

2 EricAska Jan 10 2021 at 05:13

Komponenty kątowe hostnie mają domyślnego wyświetlania, display:blockdlatego musisz je przypisać samodzielnie.

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

ale można ustawić to ustawienie w angular.json, aby przypisać domyślny sposób wyświetlania nowym komponentom generowanym za pomocą ng g c XXXXpolecenia.

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

powiązany problem:

Domyślny blok wyświetlania CSS w stylu komponentu kątowego