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

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

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

此外，单击列表中的某个项目时，将显示相同的模式窗口，其中包含该项目的所有属性（启用编辑）。在同一个模式窗口上，应该有一个“删除项目”按钮，用于从列表中删除项目

到目前为止，这个模板位于父级的引导代码中，它指向模态组件（在这里扮演子角色）

顶级项目
{{e.name}}
添加新项目

它允许我在模式窗口（子组件）中更改列表（父组件）中的项目后立即更改它。然而，我不知道如何实现另外两种情况——创建新组件和删除旧组件

[（项目）]

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

---

删除的问题相同。我应该将什么传递给子元素并传递回父元素，这样我就可以看到该项从列表中删除，而无需进行另一个API Get（）调用？

因此，如果有人感兴趣，我就是这样实现上述行为的。这可能不是正确的方法，因此，如果您有任何批评/建议/提示，请在下面留下

通常，如果用户单击现有项，我将该项传递给子组件，否则传递null。在子组件中，我假设若传递了null，则它是“创建”模式，否则它是“更新”模式

更改/添加/关闭/删除是

@Output EventEmitter

。这是一个很好的方法来实现它还是不

希望有一天能对别人有所帮助

包含项目列表的父组件：dashboard.component.html

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

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

<ng-template #newItem>
  <app-create-or-update-item
  [item]="item"
  (itemChange)="item($event)"
  (itemAdd)="addItem($event)"
  (close)="closeModal()"
  (delete)="deleteItem($event)"
  >
</app-create-or-update-item>

<div id="modal-content-wrapper">

  <div class="modal-header">
    <h4 class="modal-title pull-left">Add new item</h4>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="closeModal()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">

    <label for="itemName">Item</label>
    <input type="text" class="form-control" id="itemName" [(ngModel)]="item.name">       

  </div>
  <div class="modal-footer">
    <div *ngIf="createMode; then saveBlock else updateBlock"></div>
  </div>

</div>

<ng-template #saveBlock>
  <button type="button" class="btn btn-secondary" (click)="save()">Save</button>
</ng-template>
<ng-template #updateBlock>
  <button type="button" class="btn btn-danger" (click)="confirmDelete(confirmDeletionModal)">Delete</button>
  <button type="button" class="btn btn-secondary" (click)="save()">Update</button>
</ng-template>


<ng-template #confirmDeletionModal>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Are you sure about this?</h4>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="closeModal()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>Do you really want to delete this item?</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
    <button type="button" class="btn btn-danger" (click)="deleteItem()">Delete</button>
  </div>

</ng-template>

{{e.name}}
添加新项目

dashboard.component.ts

export class DashboardComponent implements OnInit {
  @ViewChild(CreateOrUpdateItemComponent, { static: false }) itemModal: CreateOrUpdateItemComponent;

  items: Item[] = [];
  newItemModal: BsModalRef;
  item: Item;

  constructor(private itemService: ItemService,
    private modalService: BsModalService) { }

  ngOnInit() {
    this.getItems();
  }

  getItems(): void {
    this.itemService.getItems()
      .subscribe(res => {
        this.items = res.slice(0, 50);
      });
  }

  openModal(template: TemplateRef<any>, item: Item) {
    this.item = item;
    this.newItemModal = this.modalService.show(template, { backdrop: true, keyboard: true });
  }

  closeModal() {
    this.modalService.hide(1);
  }

  change(value): void {
    this.closeModal();
  }

  addItem(value: Item) {
    this.items.push(value);
    this.closeModal();
  }

  deleteItem(value: Item) {
    this.itemService.deleteItem(value.id).subscribe();
    this.closeModal();
  }
}

导出类仪表板组件实现OnInit{
@ViewChild（CreateOrUpdateItemComponent，{static:false}）itemModal:CreateOrUpdateItemComponent；
项目：项目[]=[]；
newItemModal:BsModalRef；
项目：项目；
构造函数（私有itemService:itemService，
私有modalService:BsModalService{}
恩戈尼尼特（）{
这是getItems（）；
}
getItems（）：void{
this.itemService.getItems（）
.订阅（res=>{
this.items=res.slice（0,50）；
});
}
OpenModel（模板：TemplateRef，项：项）{
this.item=项目；
this.newItemModal=this.modalService.show（模板，{background:true，keyboard:true}）；
}
closeModal（）{
this.modalService.hide（1）；
}
更改（值）：无效{
这个.closeModal（）；
}
附加项（值：项）{
此.items.push（值）；
这个.closeModal（）；
}
deleteItem（值：Item）{
this.itemService.deleteItem（value.id）.subscribe（）；
这个.closeModal（）；
}
}

对于子组件：create-or-update-item.component.html

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

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

<ng-template #newItem>
  <app-create-or-update-item
  [item]="item"
  (itemChange)="item($event)"
  (itemAdd)="addItem($event)"
  (close)="closeModal()"
  (delete)="deleteItem($event)"
  >
</app-create-or-update-item>

<div id="modal-content-wrapper">

  <div class="modal-header">
    <h4 class="modal-title pull-left">Add new item</h4>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="closeModal()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">

    <label for="itemName">Item</label>
    <input type="text" class="form-control" id="itemName" [(ngModel)]="item.name">       

  </div>
  <div class="modal-footer">
    <div *ngIf="createMode; then saveBlock else updateBlock"></div>
  </div>

</div>

<ng-template #saveBlock>
  <button type="button" class="btn btn-secondary" (click)="save()">Save</button>
</ng-template>
<ng-template #updateBlock>
  <button type="button" class="btn btn-danger" (click)="confirmDelete(confirmDeletionModal)">Delete</button>
  <button type="button" class="btn btn-secondary" (click)="save()">Update</button>
</ng-template>


<ng-template #confirmDeletionModal>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Are you sure about this?</h4>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="closeModal()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>Do you really want to delete this item?</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
    <button type="button" class="btn btn-danger" (click)="deleteItem()">Delete</button>
  </div>

</ng-template>

添加新项目
&时代；
项目
拯救
删除
更新
你确定吗？
&时代；
是否确实要删除此项目

取消
删除

创建或更新item.component.ts：

export class CreateOrUpdateItemComponent implements OnInit {

  @Input() item: Item;
  @Output() itemChange:EventEmitter<Item> = new EventEmitter<Item>();
  @Output() itemAdd:EventEmitter<Item> = new EventEmitter<Item>();
  @Output() close:EventEmitter<any> = new EventEmitter<any>();
  @Output() delete:EventEmitter<any> = new EventEmitter<any>();

  createMode: boolean;
  deleteConfirmationModal: BsModalRef;


  constructor(private modalService: BsModalService,
              private itemService: ItemService) { }

  ngOnInit() {   
     if (this.item==null) {
       this.createMode=true;
       this.item=new Item();
     }
     else {
       this.createMode=false;
     }

  }

  save(): void {
    if (this.createMode) {
      this.itemService.createItem(this.item).subscribe();
      var addedItem=this.item;
      this.itemAdd.emit(addedItem);
    }
    else {
      this.itemService.updateItem(this.item).subscribe();
      var updatedItem=this.item;
      this.itemChange.emit(updatedItem);
    }
  }

  closeModal(): void {
    this.close.emit();
  }

  confirmDelete(template: TemplateRef<any>):void {
    this.deleteConfirmationModal = this.modalService.show(template, { backdrop: true, keyboard: true });
  }

  deleteItem():void {
    this.delete.emit(this.item);
    this.modalService.hide(1);
  }
}

导出类CreateOrUpdateItemComponent实现OnInit{
@Input（）项：项；
@Output（）itemChange:EventEmitter=neweventemitter（）；
@Output（）itemAdd:EventEmitter=新的EventEmitter（）；
@输出（）关闭：EventEmitter=新的EventEmitter（）；
@Output（）删除：EventEmitter=neweventemitter（）；
createMode：布尔型；
删除确认模式：BsModalRef；
构造函数（专用modalService:BsModalService，
私有itemService:itemService）{}
ngOnInit（）{
if（this.item==null）{
this.createMode=true；
this.item=新项（）；
}
否则{
this.createMode=false；
}
}
save（）：void{
if（this.createMode）{
this.itemService.createItem（this.item.subscribe（）；
var addedItem=此项；
this.itemAdd.emit（addedItem）；
}
否则{
this.itemService.updateItem（this.item.subscribe（）；
var updateItem=this.item；
this.itemChange.emit（updateItem）；
}
}
closeModal（）：void{
this.close.emit（）；
}
confirmDelete（模板：TemplateRef）：无效{
this.deleteConfirmationModal=this.modalService.show（模板，{background:true，keyboard:true}）；
}
deleteItem（）：void{
this.delete.emit（此项）；
this.modalService.hide（1）；
}
}

这个问题感觉有点太宽泛了。感觉上你是在要求社区为你实现功能，而不是在你真正陷入困境时进行研究。CRUD操作包含在许多教程和课程中，值得一看。@WillAlexander我不希望有人为我实现它，当然，只是一些如何正确实现的提示/常见想法。我查阅了一大堆关于它的不同文章，但我没有找到实现我所写的所有功能的最终方法。无论如何，我是如何实现它的，我会回答我自己的问题，并期待任何批评/建议/提示/等等。