如何将div宽度作为Angular输入传递？样式传参报错求助

我来帮你搞定这个问题，你之前直接通过style属性传输入报错，大概率是没走对Angular组件输入的规范流程，下面给你一步步拆解正确的实现方式，顺便帮你排查可能的错误原因：

1. 先给子组件定义接收宽度的输入属性 #

第一步必须在子组件的.ts文件里，用@Input()装饰器声明一个专门用来接收宽度的属性，这样父组件传的值才能被子组件识别到。比如：

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  // 这里可以指定类型，还能加默认值，比如默认占满宽度
  @Input() divWidth: string = '100%';
}

2. 在子组件模板里用输入属性控制div宽度 #

接下来在子组件的HTML模板中，把这个输入属性绑定到div的style.width上，这样就能动态控制宽度了：

<div [style.width]="divWidth">我是受宽度控制的div</div>

3. 父组件里给子组件传递宽度值 #

现在回到父组件，就可以通过子组件的输入属性来传宽度了，有几种常用的方式：

• 传固定值：直接写死宽度字符串，不用方括号：

  <app-child divWidth="300px"></app-child>
  

• 绑定父组件的变量：如果宽度是动态变化的，来自父组件的变量，就用方括号绑定：

  <!-- 父组件.ts里先定义：widthFromParent = '50%'; -->
  <app-child [divWidth]="widthFromParent"></app-child>
  

• 动态计算宽度：也可以直接在绑定里写表达式，比如：

  <app-child [divWidth]="isLarge ? '80%' : '30%'"></app-child>
  

你之前报错的常见原因 #

你之前用style属性传输入报错，可能是这几个问题：

• 子组件里没声明对应的@Input()属性，直接在父组件里绑定某个属性，Angular会找不到这个输入，自然报错
• 绑定语法错了：比如把输入属性和原生style混淆，或者传字符串的时候没加引号（比如<app-child [divWidth]=200px></app-child>，这里200px没加引号会被当成变量，导致找不到这个变量报错）
• 没有把宽度值绑定到子组件的div上，就算传了值也没生效，误以为是传递过程报错

举个典型的错误写法（你可能踩的坑）：

错误：子组件没加@Input() divWidth，父组件直接写<app-child [style.width]="'200px'"></app-child>——这其实是直接给子组件的根元素加style，不是通过输入属性传递，如果你要的是给子组件内部的div传宽度，这种写法就不对。

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