css: div diposisikan absolut yang memiliki ukuran yang salah di induk

Jan 10 2021

Saya mencoba untuk meletakkan gambar (sprite-sheet sebenarnya) di dalam css-grid.
Untuk dapat menganimasikan sprite-sheet dengan css, saya harus mendefinisikan posisinya sebagai 'absolut'. Saya berhasil menduplikasi masalah saya dalam kode yang sangat sederhana:

pertama saya memiliki komponen sprite-sheet yang menampung komponen sprite-sheet dan compo-image yang harus meniru komponen lain yang menyimpan sprite-sheet ini

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

komponen-dengan-image.ts

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

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

komponen-dengan-gambar.html

komponen-dengan-image.css

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

Kemudian saya mencoba menampilkan gambar ini di aplikasi saya:

komponen-dengan-gambar.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%;
}

Tapi inilah yang saya dapatkan:

keren, ini terjadi karena gambar posisi absolut saya relatif terhadap komponen root karena saya tidak menentukan posisi ke komponen lain.

Jadi saya menambahkan komponen pembungkus yang disebut sprite-sheet2 untuk memiliki posisi 'relatif' dan menjadi tuan rumah komponen sprite-sheet yang sebenarnya.

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>

Tapi kemudian saya mendapatkan ini:

Segala sesuatu di atas sprite-sheet2 memiliki lebar dan tinggi yang ditentukan tetapi sprite-sheet2 dan semua isinya memiliki ukuran 0x0, padahal komponen ini memiliki lebar dan tinggi = 100%.

Apa yang saya lakukan salah?

Jawaban

2 EricAska Jan 10 2021 at 05:13

Komponen sudut hosttidak memiliki tampilan default display:blocksehingga Anda perlu menetapkannya sendiri.

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

tetapi Anda dapat mengatur pengaturan di angular.json untuk menetapkan tampilan default untuk komponen baru yang dihasilkan dengan ng g c XXXXperintah.

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

Masalah terkait:

Blok tampilan css gaya standar komponen sudut