时间戳

首页 > 解决方案 > 使用 @Input 的 Angular 5 参数化组件

angular - 使用 @Input 的 Angular 5 参数化组件

问题描述

我是 Angular 的新手，环顾四周，但找不到答案......

如何将参数传递给正在使用的组件 ( html ) @Input？

我想要实现的目标非常简单，我有一个 LogoComponent 我想从 2 个地方调用它：LoginComponent（它应该是全尺寸）和 DashboardComponent（它size是参数化的），但我是得到一个例外：

未捕获的错误：模板解析错误：无法绑定到“大小”，因为它不是“s-logo”的已知属性。1. 如果's-logo'是一个Angular组件并且它有'size'输入，那么验证它是这个模块的一部分。

logo.component.ts（为便于理解而简化）

@Component({
    selector: 's-logo',
    template: `<div>{{size}}</div>`,   <----- size would actually set the css height 
})
export class LogoComponent{
  @Input() size: string ;
}

login.component.html（简体）

<s-logo [size]="100px"></s-logo>

我也尝试了语法，但没有运气（双引号+单引号）：

<s-logo [size]="'100px'"></s-logo>

这不是我应该如何实现的吗？

标签： angularcomponentsangular5

解决方案

无法绑定到“高度”，因为它不是已知属性

您的问题不@Input size在于 ，而是您尝试传入一个名为height.

height如果它是您试图传递的东西，您还需要为它创建一个 @Input

推荐阅读