Angular 8中如何通过父组件输入值动态设置子组件transform CSS属性

• 模板中transform的属性值是写死的普通字符串，Angular不会解析字符串内部的变量名，实际渲染出的CSS值为scaleX(widthScale) scaleY(heightScale)，属于不合法的CSS属性值，因此样式不生效。
• 子组件中@Input的类型定义和父组件传入的数字类型不匹配，存在类型隐患。

第一步：修正子组件输入参数类型 #

将子组件TS代码中两个输入参数的类型从string改为number，匹配父组件传入的数值类型：

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

第二步：修正动态样式绑定写法 #

有三种可行的绑定方式，任选一种即可：

方式1：字符串拼接变量 #

<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>

方式2：ES6模板字符串（更简洁） #

<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>

方式3：直接绑定style.transform属性（无需使用ngStyle） #

<div class="main-container" [style.transform]="`scaleX(${widthScale}) scaleY(${heightScale})`">
    <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>

内容的提问来源于stack exchange，提问作者Yaditya