css:在父级中具有错误大小的绝对定位div

Question

我试图在css网格中放置一个图像(实际上是雪碧-工作表)。

为了能够css-动画雪碧-工作表，我必须把它的位置定义为‘绝对’。我在一个非常简单的代码中复制了我的问题：

首先，我有一个sprite-sheet组件，它包含sprite-sheet和compo映像组件，它们应该模拟另一个持有这个sprite-sheet的组件。

雪碧-薄荷.组件.：

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

然后，我尝试在我的应用程序中显示这个图像：

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

但这就是我得到的：

​

酷，这是因为我的绝对定位图像相对于根组件，因为我没有为其他组件指定位置。

因此，我添加了一个名为sprite-sheet 2的包装组件，使其具有“相对”位置，并承载真正的sprite-sheet组件。

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>

但我明白了：

​

雪碧-sheet2 2上面的所有东西都定义了宽度和高度，而sprite-sheet2 2和它包含的所有东西都有0x0大小，尽管这些组件的宽度和高度= 100%。

我做错了什么？

Answer 1

角组件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
   }
 }

相关问题：

Angular component default style css display block