css: абсолютное позиционирование div с неправильным размером в родительском элементе

Question

Я пытаюсь поместить изображение (на самом деле спрайт-лист) внутри css-сетки.
Чтобы иметь возможность анимировать css-анимацию листа спрайтов, я должен определить его положение как «абсолютное». Мне удалось продублировать мою проблему в очень простом коде:

сначала у меня есть компонент спрайт-листа, который содержит компонент спрайт-листа и составного изображения, который должен имитировать другой компонент, содержащий этот спрайт-лист

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

компонент-с-изображением.ts

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

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

компонент-с-изображением.html

компонент-с-изображением.css

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

Затем я попытался отобразить это изображение в своем приложении:

компонент-с-изображением.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%;
}

Но вот что у меня получилось:

круто, это произошло потому, что мое абсолютное позиционирование изображения было относительно корневого компонента, потому что я не указывал позиции для других компонентов.

Поэтому я добавил компонент-оболочку под названием sprite-sheet2, чтобы иметь «относительную» позицию и размещать настоящий компонент спрайт-листа.

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>

Но потом я получаю следующее:

Все, что находится выше sprite-sheet2, имеет определенную ширину и высоту, но sprite-sheet2 и все, что он содержит, имеют размер 0x0, даже если эти компоненты имеют ширину и высоту = 100%.

Что я делаю неправильно?

Answer 1

Компоненты Angular hostне имеют отображения по умолчанию, display:blockпоэтому вам нужно назначить его самостоятельно.

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

но вы можете установить настройку в angular.json, чтобы назначить отображение по умолчанию для новых компонентов, созданных с помощью ng g c XXXXкоманды.

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

связанный вопрос:

Блок отображения css в стиле углового компонента по умолчанию