css: div ตำแหน่งสัมบูรณ์ที่มีขนาดไม่ถูกต้องในพาเรนต์
ฉันกำลังพยายามใส่รูปภาพ (สไปรต์ชีทจริง) ใน css-grid
เพื่อให้สามารถ css-animate สไปรท์ชีทได้ฉันต้องกำหนดตำแหน่งของมันเป็น 'สัมบูรณ์' ฉันจัดการเพื่อทำซ้ำปัญหาของฉันด้วยรหัสง่ายๆ:
ก่อนอื่นฉันมีส่วนประกอบสไปรต์ชีทที่เก็บสไปรต์ชีตและคอมโพสิตอิมเมจที่ควรล้อเลียนส่วนประกอบอื่นที่เก็บสไปรต์ชีตนี้
สไปรต์ 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>
สไปรต์ 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')
}
คอมโพเนนต์กับ 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
คอมโพเนนต์กับ 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%;
}
แต่นี่คือสิ่งที่ฉันได้รับ:
เจ๋งสิ่งนี้เกิดขึ้นเนื่องจากภาพที่อยู่ในตำแหน่งที่แน่นอนของฉันสัมพันธ์กับองค์ประกอบรากเนื่องจากฉันไม่ได้ระบุตำแหน่งให้กับส่วนประกอบอื่น ๆ
ดังนั้นฉันจึงเพิ่มส่วนประกอบของกระดาษห่อที่เรียกว่าสไปรต์ - ชีท 2 เพื่อให้มีตำแหน่ง 'สัมพัทธ์' และโฮสต์องค์ประกอบสไปรต์ชีทจริง
สไปรต์ 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() {
}
}
สไปรต์ sheet.component2.ts
:host {
position: relative;
height: 100%;
width: 100%;
}
sprite-sheet {
height: 100%;
width: 100%;
}
สไปรต์ sheet2.component2.html
<sprite-sheet></sprite-sheet>
แต่แล้วฉันก็ได้รับสิ่งนี้:
ทุกสิ่งที่อยู่เหนือสไปรต์ชีท 2 ได้กำหนดความกว้างและความสูงไว้แล้ว แต่สไปรต์ชีต 2 และทุกสิ่งที่มีมีขนาด 0x0 แม้ว่าส่วนประกอบเหล่านี้จะมีความกว้างและความสูง = 100%
ผมทำอะไรผิดหรือเปล่า?
คำตอบ
ส่วนประกอบเชิงมุม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 เริ่มต้นขององค์ประกอบเชิงมุม