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

Posted 2023-02-23

【中文标题】如何将多个变量传递给 Angular 2 中的组件？

【英文标题】：How can I pass multiple variables into a component in Angular 2?

【发布时间】：2017-05-06 04:30:28

【问题描述】：

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

【问题讨论】：

...添加另一个输入？

@jonrsharpe 或对象

天哪 :( 这杀了我

【参考方案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