如何在 Angular 中应用变换缩放内联样式？

Question

如何通过传递来自 angular

的值来应用转换内联样式

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 字符串来更优雅地做到这一点，该字符串是通过播放您的 class properties/inputs/variables 根据您的需要。 HTML 看起来更像：

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

Answer 2

您可以使用 ngStyle 指令实现此目的。我在 AppComponent 中为比例值添加了一些输入元素，并将它们传递给 HelloComponent，其中比例值用于创建变换样式。

https://stackblitz.com/edit/angular-acskvs

Answer 3

const element = document.getElementById(id) as HTMLElement;
// set style
element.style.transform = 'scaleY(1)';
// remove style
element.style.transform = '';

如何在 Angular 中应用变换缩放内联样式？

How to apply transform scale inline style in Angular?

ng-style

angular