angular - 如何在 Angular 中应用变换比例内联样式？

Question

如何通过传递 Angular 值来应用变换内联样式

这是 Stackblitz Link

import { Component, Input } from "@angular/core";

@Component({
  selector: "hello",
  template: `
    <h1>Hello {{ name }}!</h1>

    <div>Normal</div>
    <div class="scaled">Scaled</div>

    <div
      class="scaledng"
      [style.transform.scale.x]="scaleX"
      [style.transform.scale.y]="scaleY"
    >
      Scaled by Angular
    </div>

    <p>
      How can I scale the last div by passing angular variables
    </p>
  `,
  styles: [
    `
      div {
        width: 80px;
        height: 80px;
        background-color: skyblue;
      }

      .scaled {
        transform: scale(0.7, 0.5); /* Equal to scaleX(0.7) scaleY(0.7) */
        background-color: pink;
      }

      .scaledng {
        background-color: pink;
      }
    `
  ]
})
export class HelloComponent {
  @Input() name: string;

  scaleX = 0.7;
  scaleY = 0.5;
}

Answer 1

我会这样做:

.ts 文件

scaleXY = 'scale(' + .7 + ',' + .5 + ')';

模板

<div class="scaledng" [style.transform]="scaleXY">Scaled by Angular</div>

.7 和 .5 将来自您的动态变量等。

blitz已更新。

如果你不希望它与 X 和 Y 上的比例如此紧密地联系在一起，你可以通过发送一个完整的 transform 字符串来做到更优雅，该字符串是通过玩你的您需要的类属性/输入/变量。 HTML 看起来更像是:

<div class="scaledng" [style.transform]="transformStyle">Scaled by Angular</div>