在角度 8 中应用条件 css 值答案

【问题标题】：Appyling conditional css values in angular 8在角度 8 中应用条件 css 值
【发布时间】：2021-10-07 06:43:18
【问题描述】：

我有一个父组件和子组件，我使用子组件的选择器在父组件中呈现它。

我的子组件html：

<div class="main-container" [ngStyle]="{'transform': 'scaleX(widthScale) scaleY(heightScale)'}">
    <img src="../../assets/svg/kiln-main.jpg" class="kiln-image">
    <svg id="area2"></svg>
    <svg id="area"></svg>
</div>

子组件ts：

@Input() widthScale:string;
@Input() heightScale:string;

我想根据父级的值将“transform:scalex() scaley()”应用于子级。

我的父母：

<app-child [widthScale]="0.5" [heightScale]="0.5"></app-child>

上面的代码不知何故不起作用。如何在此处将值应用于 css 属性“转换”？

【问题讨论】：

标签： html css angular

【解决方案1】：

你可以在child中创建一个方法如下：

  getTransformStyle() {
    let styles = {
      transform: `scaleX(${this.widthScale}) scaleY(${this.heightScale})`,
    };
    return styles;
  }

在子html中使用如下：

<div class="main-container" [ngStyle]="getTransformStyle()">
  <img src="../../assets/svg/kiln-main.jpg" class="kiln-image" />
  <svg id="area2"></svg>
  <svg id="area"></svg>
</div>

你可以这样称呼孩子：

<app-child [widthScale]="'0.5'" [heightScale]="'0.5'"></app-child>

工作示例：https://stackblitz.com/edit/angular-ivy-gaohfo

【讨论】：