Angular组件多实例绑定输入问题答案

【问题标题】：Angular component multiple instance binding input problemAngular组件多实例绑定输入问题
【发布时间】：2020-05-19 06:46:24
【问题描述】：

我正在使用Angular Wrapper 来表示JSON Editor，如下所示：

<div *ngFor="let act of editedActions" class="w-100-p p-24">
  {{act.test_step_id}}
  <json-editor [options]="editorOptions" [(data)]="act.action_json" [(eventParams)]="act.test_step_id" (jsonChange)="changeStepActions($event)"></json-editor>
  <button mat-raised-button class="w-100-p mt-24" color="primary" (click)="editRecordJson(act.test_step_id)">
    <span>Update</span>
  </button>
</div>

问题是eventParams 对于每个编辑器应该是不同的，但它并没有变化。

我认为问题是这个组件代码（但不确定）（这一行是在从 github 获取的组件中）：

@ViewChild('jsonEditorContainer', { static: true }) jsonEditorContainer: ElementRef;

组件表现得像一个单例。有什么帮助吗？

编辑：我编辑了这个 repo 并添加了 jsonchange 事件。详情here

【问题讨论】：

你在模板中哪里定义了jsonEditorContainer，我看不到。此外，如果您想在 ngFor 中使用多个实例，您应该使用 ViewChildren
在github链接的组件中定义：github.com/mariohmol/ang-jsoneditor/blob/master/ang-jsoneditor/…
什么是eventParams？是ang-jsoneditor 的输入\输出吗？自定义指令？我找不到任何关于它的信息。
我对其进行了编辑以尝试是否可以通过手动传递给事件来获取参数。 editRecordJson 事件也是如此。

标签： javascript angular angular-components

【解决方案1】：

您可能希望使用 @ViewChildren 直接引用组件而不是模板变量字符串，以获取所有 JSON 编辑器引用：

@ViewChildren(JsonEditorComponent) jsonEditorContainers: QueryList<ElementRef>;

// ...

jsonEditorContainers.find(...);

它返回一个QueryList，允许您遍历所有ElementRef，并使用可观察的changes 监控更改。

【讨论】：

但是@viewchildren 在不是我写的组件中。它来自开源组件。
好吧，我错过了，我修改了我的答案。我认为您应该使用 (JsonEditorComponent) 而不是模板变量字符串 ('jsonEditorContainer') 进行查询，就像他们在存储库自述文件的示例中演示的那样。
我可以获得编辑器的实例。但是事件仍然没有动态发送参数（或 eventParams）。我怎么知道哪些数据被编辑了？
那我不知道怎么解决你的问题。我和 PierreDuc 有同样的问题，eventParams 来自哪里？如果库的组件上不存在它，则无法绑定到它。

【解决方案2】：

eventParams 是什么？ jsonChange 是什么？我可能是错的，但根据源代码，数据似乎也不是双向可绑定的。

看来您可能正在寻找这样的东西：

<div *ngFor="let act of editedActions" class="w-100-p p-24">
  <json-editor [options]="editorOptions" 
               [data]="act.action_json"
               (change)="changeStepActions($event, act.test_step_id)">
  </json-editor>
</div>

然后您可以在您的changeStepActions 方法中读取test_step_id。如果这行得通，我不知道你是如何编译它的......你使用的是CUSTOM_ELEMENTS_SCHEMA吗？

【讨论】：

jsonchange 是我添加的事件。你可以在这个 pull reuest 中看到：github.com/mariohmol/ang-jsoneditor/pull/58。 eventparams 只是控制器的@input。我尝试在 jsonchage 事件中返回它，但它也没有工作。

【解决方案3】：

不必使用@ViewChildren，因为您必须重写组件的整个代码，请确保在使用@ViewChild 时传递正确的编辑器引用。

如下

@ViewChild('carEditor' ) carEditor: JsonEditorComponent;
@ViewChild('mobileEditor') mobileEditor: JsonEditorComponent;

Stackblitz 示例供参考：

Click here for code example

【讨论】：

【解决方案4】：

To use multiple jsoneditors in your view you cannot use the same editor options.

You should have something like:

<div *ngFor="let prd of data.products" class="w-100-p p-24" >
  <json-editor [options]="makeOptions()" [data]="prd" (change)="showJson($event)"></json-editor>
</div>
makeOptions = () => {
  return new JsonEditorOptions();
}

【讨论】：