使用 @Input 的 Angular 5 参数化组件答案

【问题标题】：Angular 5 parametrized component using @Input使用 @Input 的 Angular 5 参数化组件
【发布时间】：2018-10-09 19:23:29
【问题描述】：

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

如何将参数传递给使用@Input 的组件（html）？

我想要实现的目标非常简单，我有一个 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>

这不就是我应该实现的吗？

【问题讨论】：

这是传递Input 的正确方法，但是任何地方都没有height。我怀疑你喜欢<s-logo [height]="100px"></s-logo>
你用@NgModule声明数组注册你的组件了吗？
是的，两者都在我的 app.module 中

标签： angular components angular5

【解决方案1】：

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

你的问题不在于@Input size，而是你试图传入一个名为height 的不同变量。

如果您试图传入 height，您还需要为 @Input 创建一个 @Input

【讨论】：

你是对的，在其他一些被遗忘的文件中，<s-logo> 指的是错误的变量名......呃！