css：親のサイズが間違っている絶対位置のdiv

Jan 10 2021

css-grid内に画像（実際にはスプライトシート）を配置しようとしています。
スプライトシートをcssアニメーション化できるようにするには、その位置を「絶対」として定義する必要があります。私は非常に単純なコードで問題を再現することができました：

まず、スプライトシートを保持するスプライトシートコンポーネントと、このスプライトシートを保持する別のコンポーネントをモックするコンポイメージコンポーネントがあります。

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

次に、この画像をアプリに表示しようとしました。

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-sheet2というラッパーコンポーネントを追加して、「相対的な」位置を設定し、実際のスプライトシートコンポーネントをホストしました。

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>

しかし、私はこれを取得します：

sprite-sheet2より上のすべてに幅と高さが定義されていますが、sprite-sheet2とそれに含まれるすべてのコンポーネントの幅と高さは100％ですが、サイズは0x0です。

私は何が間違っているのですか？

回答

2 EricAska Jan 10 2021 at 05:13

Angularコンポーネントに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
   }
 }