angular中的@Input如何以单个或多个对象的形式发送数据？

Question

我有几个对象要发送到子组件，但由于在子组件中未定义，因此无法发送。

这是代码——

PARENT COMPONENT
searchObj!: Search;
resultObj:any;

PARENT HTML
<child [counters]="{labelObj:resultObj,searchObj:searchObj}></child>

CHILD COMPONENT
@Input()
counters:any;
label = this.counters.labelObj;
search:Search = this.counters.searchObj;

即使我发送单个 object，它仍然在子组件中显示未定义。

PARENT COMPONENT
searchObj!: Search;


PARENT HTML
<child [counters]="searchObj"></child>

CHILD COMPONENT
@Input()
counters!:Search;

searchObj:Search = this.counters;

TIA。

Answer 1

您当然可以将 object 发送到子组件，如果您需要发送多个对象，您可以轻松地将它们作为对象数组发送。 这是一个例子： https://stackblitz.com/edit/input-output-angular-mcua1d

使用接口 'Something' 作为类型的示例。

我不知道你是如何设置 searchObj 和 resultObj 的值，所以这里有一个在父组件 onInit 中设置一个 object 和一个对象数组的示例：

somethingObj: Something;
somethingArr: Something[];


ngOnInit() {
    this.somethingObj = {
      something1: 'value of something1',
      something2: 'value of something2',
    };
    this.somethingArr = [
      {
        something1: 'value of something1',
        something2: 'value of something2',
      },
      {
        something1: 'value of something3',
        something2: 'value of something4',
      },
      {
        something1: 'value of something5',
        something2: 'value of something6',
      },
    ];
}

然后将它们传递给模板中的子组件：

<app-child [fromParentObj]="somethingObj" [fromParentArr]="somethingArr"></app-child>

在子组件中获取它们：

@Input() fromParentObj: Something;
@Input() fromParentArr: Something[];

ngOnInit() {
    console.log(this.fromParentObj);
    console.log(this.fromParentArr);
}

只是为了在模板中看到它们，您可以将其添加到子组件的 html 中：

<code
  >Object From Parent:
  <pre>{{ fromParentObj | json }}</pre>
</code>

<code
  >Array of objects From Parent:
  <ng-container *ngFor="let obj of fromParentArr">
    <pre>{{ obj | json }}</pre>
  </ng-container>
</code>