Angular组件@Input传参报错：无法绑定'size'至's-logo'组件

嘿，我来帮你搞定这个问题！你遇到的这个错误是Angular新手非常常见的问题，核心原因要么是组件的@Input属性没正确定义，要么是组件没在模块里完成正确注册。我一步步给你拆解解决方法：

第一步：确保LogoComponent正确定义@Input属性 #

首先打开你的LogoComponent类文件，一定要用@Input()装饰器声明size属性，同时可以给它设置默认值（这样Login组件里不用传参数就能默认全尺寸）：

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

@Component({
  selector: 's-logo', // 注意这个选择器要和你模板里用的<s-logo>完全一致
  templateUrl: './logo.component.html',
  styleUrls: ['./logo.component.css']
})
export class LogoComponent {
  // 这里设置默认全尺寸，Login组件直接用就行
  @Input() size: string = '100%'; 
  // 如果你的尺寸是数字类型（比如百分比数值），也可以写成：@Input() size: number = 100;
}

第二步：确保组件在模块中正确注册 #

如果你的LogoComponent是放在共享模块（比如SharedModule）里，一定要在模块里声明并导出它，这样其他模块（Login、Dashboard所在的模块）才能访问到：

// shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LogoComponent } from './logo/logo.component';

@NgModule({
  declarations: [LogoComponent], // 声明这个组件
  exports: [LogoComponent], // 导出，让其他模块能使用
  imports: [CommonModule]
})
export class SharedModule { }

然后在Login和Dashboard所在的模块里，导入这个SharedModule：

// 比如login.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login.component';
import { SharedModule } from '../shared/shared.module'; // 导入共享模块

@NgModule({
  declarations: [LoginComponent],
  imports: [CommonModule, SharedModule]
})
export class LoginModule { }

第三步：在父组件模板中传递参数 #

现在就可以在两个父组件里正常使用了：

• LoginComponent模板（默认全尺寸，不用传参数）：

<s-logo></s-logo>

• DashboardComponent模板（传递自定义尺寸）：

<!-- 直接传固定值，比如200px宽度 -->
<s-logo [size]="'200px'"></s-logo>

<!-- 或者绑定组件类里的动态变量 -->
<s-logo [size]="dashboardLogoSize"></s-logo>

如果用动态变量，记得在DashboardComponent类里定义：

export class DashboardComponent {
  dashboardLogoSize: string = '150px'; // 可以根据业务逻辑动态修改
}

为什么会出现那个错误？ #

你看到的Uncaught Error: Template parse errors: Can't bind to 'size' since it isn't a known property of 's-logo'，通常是这几个原因：

• 没给size加@Input()装饰器，Angular不知道这个属性允许从父组件传入
• LogoComponent没在当前模块（或导入的共享模块）中声明/导出，Angular识别不了<s-logo>组件，自然找不到它的属性
• 组件的selector写错了（比如组件里是app-logo，模板里用了<s-logo>）

按照上面的步骤操作后，重启Angular应用应该就能正常运行了～

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