css: div được định vị tuyệt đối có kích thước sai trong cha mẹ

Question

Tôi đang cố gắng đặt một hình ảnh (thực tế là sprite-sheet) bên trong một lưới css.
Để có thể css-animation cho sprite-sheet, tôi phải xác định vị trí của nó là 'tuyệt đối'. Tôi đã quản lý để sao chép sự cố của mình trong một mã rất đơn giản:

đầu tiên, tôi có một thành phần sprite-sheet chứa thành phần sprite-sheet và compo-image sẽ giả lập một thành phần khác chứa sprite-sheet này

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

component-with-image.html

component-with-image.css

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

Sau đó, tôi đã cố gắng hiển thị hình ảnh này trong ứng dụng của mình:

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

Nhưng đây là những gì tôi nhận được:

tuyệt, điều này đã xảy ra vì hình ảnh được định vị tuyệt đối của tôi có liên quan đến thành phần gốc vì tôi không chỉ định vị trí cho các thành phần khác.

Vì vậy, tôi đã thêm một thành phần trình bao bọc được gọi là sprite-sheet2 để có vị trí 'tương đối' và lưu trữ thành phần sprite-sheet thực.

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>

Nhưng sau đó tôi nhận được điều này:

Mọi thứ ở trên sprite-sheet2 đều có chiều rộng và chiều cao được xác định nhưng sprite-sheet2 và mọi thứ mà nó chứa có kích thước 0x0, mặc dù các thành phần này có chiều rộng và chiều cao = 100%.

Tôi đang làm gì sai?

Answer 1

Các thành phần góc hostkhông có hiển thị mặc định display:blockdo đó bạn cần phải tự gán nó.

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

nhưng bạn có thể đặt cài đặt trong angle.json để gán hiển thị mặc định cho các thành phần mới được tạo bằng ng g c XXXXlệnh.

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

vấn đề liên quan:

Khối hiển thị css kiểu mặc định của thành phần góc