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

Question

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

Answer 1

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

Answer 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 }}