css: div posicionado absoluto tendo um tamanho errado em um pai
Estou tentando colocar uma imagem (sprite-sheet na verdade) dentro de uma grade css.
Para poder css-animar a sprite-sheet, eu tenho que definir sua posição como 'absoluta'. Consegui duplicar meu problema em um código muito simples:
primeiro eu tenho um componente de folha de sprite que contém a folha de sprite e o componente de imagem de compo que deve simular outro componente que contém esta folha 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')
}
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%;
}
Então tentei exibir esta imagem em meu aplicativo:
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%;
}
Mas é isso que eu tenho:
legal, isso aconteceu porque minha imagem posicionada absoluta era relativa ao componente raiz porque eu não especifiquei posições para os outros componentes.
Então, adicionei um componente wrapper chamado sprite-sheet2 para ter uma posição 'relativa' e hospedar o componente sprite-sheet 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>
Mas então eu entendo:
Tudo acima de sprite-sheet2 tem largura e altura definidas, mas sprite-sheet2 e tudo que ele contém tem tamanho 0x0, embora esses componentes tenham largura e altura = 100%.
O que estou fazendo de errado?
Respostas
Os componentes angulares host
não têm exibição padrão, display:block
portanto, você mesmo precisa atribuí-la.
:host {
display: block; // or anything else
position: relative;
height: 100%;
width: 100%;
}
mas você pode definir a configuração em angular.json para atribuir a exibição padrão para novos componentes gerados com o ng g c XXXX
comando.
"schematics": {
"@schematics/angular:component": {
"displayBlock": true
}
}
problema relacionado:
Bloco de exibição CSS do estilo padrão do componente angular