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

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

그런 다음이 이미지를 내 앱에 표시하려고했습니다.

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

그러나 이것이 내가 얻은 것입니다.

멋지다. 이것은 내 절대 위치 이미지가 다른 구성 요소에 위치를 지정하지 않았기 때문에 루트 구성 요소에 상대적이기 때문에 발생했습니다.

그래서 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와 여기에 포함 된 모든 구성 요소는 너비와 높이 = 100 %이지만 0x0 크기를 갖습니다.

내가 도대체 ​​뭘 잘못하고있는 겁니까?

Answer 1

각도 구성 요소 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 표시 블록