css: div ตำแหน่งสัมบูรณ์ที่มีขนาดไม่ถูกต้องในพาเรนต์

Jan 10 2021

ฉันกำลังพยายามใส่รูปภาพ (สไปรต์ชีทจริง) ใน 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%

ผมทำอะไรผิดหรือเปล่า?

คำตอบ

2 EricAska Jan 10 2021 at 05:13

ส่วนประกอบเชิงมุม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 เริ่มต้นขององค์ประกอบเชิงมุม