css: div diposisikan absolut yang memiliki ukuran yang salah di induk
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
Komponen sudut host
tidak memiliki tampilan default display:block
sehingga 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 XXXX
perintah.
"schematics": {
"@schematics/angular:component": {
"displayBlock": true
}
}
Masalah terkait:
Blok tampilan css gaya standar komponen sudut