删除元素后更新列表

Update List after deleting an element

我有一个用 JHipster 5.5.0 生成的项目,我有 2 个实体:parent & child.

当我看到parent的详细信息时,我列出了children。当我想删除 child 时,我使用 child 的模态,它可以正常工作。

我的问题是删除实体后列表没有更新,我不知道去哪里找。我尝试使用静态方法以便重新加载列表,但我无法这样做。任何帮助将不胜感激。

Child的Angular代码:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

import { NgbActiveModal, NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { JhiEventManager } from 'ng-jhipster';

import { IChild } from 'app/shared/model/child.model';
import { ChildService } from './Child.service';

@Component({
    selector: 'jhi-child-delete-dialog',
    templateUrl: './child-delete-dialog.component.html'
})
export class ChildDeleteDialogComponent {
    child: IChild;

    constructor(
        private childService: ChildService,
        public activeModal: NgbActiveModal,
        private eventManager: JhiEventManager
    ) {}

    clear() {
        this.activeModal.dismiss('cancel');
    }

    confirmDelete(id: number) {
        this.childService.delete(id).subscribe(response => {
            this.eventManager.broadcast({
                name: 'childtModification',
                content: 'Deleted a child'
            });
            this.activeModal.dismiss(true);
        });
    }
}

@Component({
    selector: 'jhi-child-delete-popup',
    template: ''
})
export class ChildDeletePopupComponent implements OnInit, OnDestroy {
    private ngbModalRef: NgbModalRef;

    constructor(private activatedRoute: ActivatedRoute, private router: Router, private modalService: NgbModal) {}

    ngOnInit() {
        this.activatedRoute.data.subscribe(({ child }) => {
            setTimeout(() => {
                this.ngbModalRef = this.modalService.open(ChildDeleteDialogComponent as Component, {
                    size: 'lg',
                    backdrop: 'static'
                });
                this.ngbModalRef.componentInstance.child = child;
                this.ngbModalRef.result.then(
                    result => {
                        this.router.navigate([{ outlets: { popup: null } }], { replaceUrl: true, queryParamsHandling: 'merge' });
                        this.ngbModalRef = null;
                    },
                    reason => {
                        this.router.navigate([{ outlets: { popup: null } }], { replaceUrl: true, queryParamsHandling: 'merge' });
                        this.ngbModalRef = null;
                    }
                );
            }, 0);
        });
    }

    ngOnDestroy() {
        this.ngbModalRef = null;
    }
}

在 parent 实体中,我有一个这样的按钮:

<button type="submit" [routerLink]="['/', { outlets: { popup: 'child/'+ child.id + '/delete'} }]"
replaceUrl="true"
queryParamsHandling="merge"
class="btn btn-danger btn-sm">
<fa-icon [icon]="'times'"></fa-icon>
<span class="d-none d-md-inline" jhiTranslate="entity.action.delete">Delete</span>
</button>

删除child的模态组件都没有被修改

寻找相同答案的人:

删除子项时,组件广播事件如下:

this.eventManager.broadcast({
    name: 'childListModification',
    content: 'Deleted a Child'
});

我只需要(在父组件中)订阅这样的事件:

registerChangeInChildren() {
    this.eventSubscriber = this.eventManager.subscribe('childListModification', response => {
        this.getAll();
    });
}

并在 ngOnInit() 中调用 this.registerChangeInChildren(),一切正常。