How can I pass multiple variables into a component in Angular 2?

Question

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

Answer 1

Yes, didn't realize you can put two @Input's on the same component. I was trying to squeeze two variables into the same @Input. I thought anything that started with @ could only be used once lol.

Answer 2

Alternatively, See this : https://stackblitz.com/edit/angular-with-multiple-variable-input

You can pass all your variable as Object:

/* 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 }}