Angular2 将 JSON 对象传递给组件的构造函数

Question

我有以下场景，其中我的第一个组件 config.editor.component 进行了大量处理并创建了各种不同的 JSON 对象。

我对这种方法很满意。该组件的模板然后使用 *ngFor 循环呈现另一个组件 - api.entry.component。如何将我在 config.editor.component.ts 中创建的 JSON 对象传递到 api.entry.component 的构造函数中？

我当前的模板如下所示：

<!-- loop and display all api components here -->
<ct-api-entry *ngFor="let api in apis"></ct-api-entry>

我要传给构造函数的对象其实就是上面看到的'api'。该对象是根据此代码在 config.editor.component.ts 文件中创建的，该代码按我的预期执行所有操作并将 JSON 数组分配给 apis 变量：

 clicked(event){
      ipc.send('open-file-dialog');
      ipc.on('selected-directory', (event, obj) => {
        this.server_description = obj.description;
        this.features = obj.features;
        this.apis = obj.apis;
        this.wola_configs = obj.configs;
        this.connection_factories = obj.connection_factories;
      });
  }

我真正想要的是能够在 api.entry.component.ts:

的构造函数中从我的模板循环中访问特定的 api

import { Component } from '@angular/core';

@Component({
  selector: 'ct-api-entry',
  templateUrl: 'api.entry.component.html',
  styleUrls: ['api.entry.component.css']
})
export class APIEntryComponent {
//I NEED TO PASS THIS CONSTRUCTOR AN SPECIFIC JSON OBJECT FROM APIS IN THE CONFIG-EDITOR MAIN COMPONENT
  constructor() {
 //I WANT TO ACCESS MY JSON API OBJ IN HERE!
  }

}

我觉得这一定很简单，但我正在努力看看它是如何工作的！请帮助我理解如何将 *ngFor 循环中的 JSON 对象传递到模板正在构建的组件的构造函数中。

Answer 1

在 ct-api-entry 组件中使用 Input 装饰器定义 api：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'ct-api-entry',
  templateUrl: 'api.entry.component.html',
  styleUrls: ['api.entry.component.css']
})
export class APIEntryComponent {
   @Input() api: any;   
   constructor() {}
}

然后在模板中传递它：

<ct-api-entry *ngFor="let api of apis" [api]="api"></ct-api-entry>

Angular2 将 JSON 对象传递给组件的构造函数

Angular2 passing a JSON object to the constructor of a component

javascript

json

electron

angular