Question

我目前在我的子组件上使用@Input，并传入一个变量，但我无法弄清楚如何传入第二个变量。

Answer 1

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

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

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

2 个答案: