在父子关系中的Angular中实现添加/更新/删除动作的最佳方法是什么？

Question

我有一个项目列表，我想实现添加/更新/删除功能。

通常，我有一个项目列表（父组件），旁边是一个按钮。单击时，将打开模式窗口（子组件），该窗口允许输入项目的属性。

[此外，在列表中单击某个项目时，将显示具有该项目所有属性的相同模式窗口（可进行编辑）。在同一模式窗口上，应该有一个“删除项目”按钮，该按钮将从列表中删除项目。]

到目前为止，我已经在父级的引导程序代码中找到了这个模板，该模板指向模态组件（在此扮演子角色）

<h3>Top Items</h3>
<div class="grid grid-pad">
  <a *ngFor="let e of items" class="col-1-4"  (click)="openModal(e)">
    <div class="module items">
      <h4>{{e.name}}</h4>
    </div>
  </a>
</div>

<button type="button" class="btn btn-primary" (click)="openModal(item)">Add new item</button>

  <ng-template #newItem>
  <app-create-or-update-item
  [(item)]="item"
  (ngModelChange)="itemChange.emit($event); change()" ngControl="item" name="item">
它允许我在模式窗口（子组件）中更改列表（父组件）中的项目。但是，我不知道如何实现另外两种情况-创建新组件并删除旧组件。

[(item)]是正在编辑的项目。但是，当单击“创建新项目”按钮并且我没有要编辑的项目但想要创建一个新项目时，我应该作为项目传递什么？当模态窗口关闭时，如何实现自动将此新创建的项目添加到列表中？

相同的删除问题。我应该传递给child的元素，然后传递回parent的元素，以便我可以看到此项目从列表中删除，而无需再次调用API Get（）？

我有一个项目列表，我想实现添加/更新/删除功能。通常，我有一个项目列表（父级组件），并在其旁边有一个按钮。单击时，将打开模式窗口（...

Answer 1

因此，如果有人感兴趣，这就是我实现上述行为的方式。这可能不是正确的方法，因此，如果您有任何批评家/建议/技巧，请把它们放在下面。