Ionic 3 和 Angular 2 中的多个 @Input

Posted 2023-02-23

【中文标题】Ionic 3 和 Angular 2 中的多个 @Input

【英文标题】：Multiple @Input in Ionic 3 and Angular 2

【发布时间】：2018-04-12 03:59:46

【问题描述】：

在我的 Ionic 3 项目中，我创建了自定义组件 my-component。 现在我们知道使用 angular @Input 我们可以将数据传递给这个组件。 我有 2 个输入作为

  @Input('finder') myFinder: Finder; //Finder is an Interface
  @Input('list') myList: Array<any>; 

我将这个组件用作

<my-component [finder]="dataFinder" [list]="aList"></my-component>

dataFinder 和 aList 都有值，但 myFinder 值始终为 undefined，其中 myList 已正确填充。

这是使用多个输入的任何限制吗？

【问题讨论】：

不，没有限制，请在 plunker/stackblitz 中重现此问题 :)

对不起，伙计们。这是我的失误。我正在阅读构造函数中的输入参数。应该在 ngAfterViewInit() 之后完成。

嗯，你也可以在 OnInit 中做，那里的输入也是可用的。

【参考方案1】：

实际上，您根本不需要维护 2 个数据绑定属性。您可以更优雅地执行此操作，如下所示。希望代码是不言自明的。

my-class.ts

export class MyClass
   finder:Finder;
   myList:Array<any>;   

.ts

@Input('data') data: MyClass;

.html

<my-component [data]="data"></my-component>