css: bir üst öğede yanlış boyuta sahip mutlak konumlandırılmış div

Question

Bir css ızgarasının içine bir resim (aslında hareketli grafik sayfası) koymaya çalışıyorum.
Hareketli grafik sayfasını css-canlandırabilmek için, konumunu 'mutlak' olarak tanımlamam gerekiyor. Sorunumu çok basit bir kodda kopyalamayı başardım:

İlk olarak, hareketli grafik sayfasını ve bu hareketli grafik sayfasını tutan başka bir bileşenle alay etmesi gereken bileşik görüntü bileşenini tutan bir hareketli grafik sayfası bileşenine sahibim

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 {
}

image.html ile bileşen

image.css ile bileşen

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

Sonra bu resmi uygulamamda görüntülemeye çalıştım:

image.html ile bileşen

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

Ama sahip olduğum şey bu:

harika, bunun nedeni mutlak konumlandırılmış görüntümün kök bileşene göre olmasıydı çünkü diğer bileşenlere konum belirtmedim.

Bu yüzden, 'göreli' bir konuma sahip olmak ve gerçek hareketli grafik sayfası bileşenini barındırmak için hareketli grafik sayfası2 adlı bir sarmalayıcı bileşeni ekledim.

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>

Ama sonra şunu anlıyorum:

Hareketli grafik sayfası2'nin üzerindeki her şey tanımlı genişliğe ve yüksekliğe sahiptir, ancak hareketli grafik sayfası2 ve içerdiği her şey, bu bileşenlerin genişliği ve yüksekliği =% 100 olsa bile, 0x0 boyutuna sahiptir.

Neyi yanlış yapıyorum?

Answer 1

Açısal bileşenlerin hostvarsayılan görüntüsü yoktur, display:blockbu nedenle bunu kendiniz atamanız gerekir.

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

ancak, ng g c XXXXkomutla oluşturulan yeni bileşenlere varsayılan görüntü atamak için ayarı angular.json içinde ayarlayabilirsiniz .

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

ilgili konu:

Açısal bileşen varsayılan stili css görüntüleme bloğu