如何将多个变量传递给 Angular 2 中的组件？答案

【问题标题】：How can I pass multiple variables into a component in Angular 2?如何将多个变量传递给 Angular 2 中的组件？
【发布时间】：2017-05-06 04:30:28
【问题描述】：

我目前在我的子组件上使用@Input，并传入一个变量，但我不知道如何传入第二个。

【问题讨论】：

...添加另一个输入？
@jonrsharpe 或对象
天哪 :( 这杀了我

标签： variables angular input components

【解决方案1】：

是的，没有意识到您可以将两个@Input 放在同一个组件上。我试图将两个变量压缩到同一个@Input 中。我以为以@开头的任何东西都只能使用一次lol。

【讨论】：

【解决方案2】：

或者，请参阅：https://stackblitz.com/edit/angular-with-multiple-variable-input

您可以将所有变量作为对象传递：

在父级中

/* parent.component.ts file */

export class ParentComponent{

      parentVariables:Object = {
          variable1 : "Temp String",
          variable2 : 23 // Temp Number
      }

}

<!-- parent.component.html file -->

<app-child [childVariables]="parentVariables"> </app-child>

在孩子中

/* child.component.ts file */

export class ChildComponent{

    @Input()
    childVariables:any;

}

<!-- child.component.html file -->

 variable1 : {{childVariables.variable1}} <br />
 variable2 : {{childVariables.variable2 }}

【讨论】：