在父/子关系中实现 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)]是正在编辑的项目。但是，当单击"创建新项目"按钮并且我没有要编辑的项目，但想要创建一个新项目时，我应该将什么作为项目传递？以及如何在模态窗口关闭时实现将此新创建项自动添加到列表中？

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

Answer 1

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

通常，如果用户单击现有项，则此项将传递给子组件，否则传递 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>

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();
}
}

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

<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>

create-or-update-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);
}
}