Обновить список после удаления элемента

Question

У меня есть проект, сгенерированный с помощью JHipster 5.5.0, и у меня есть 2 объекта: parent & child.

Я перечисляю детей, когда вижу детали родителя.Когда я хочу удалить дочерний элемент, я использую модальный дочерний элемент, и он работает, как и должно быть.

Моя проблема заключается в том, что после удаления объекта список не обновляется, и я не знаю, где искать.Я попытался использовать статические методы, чтобы я мог перезагрузить список, но я не могу это сделать.Мы будем благодарны за любую помощь.

Угловой код ребенка:

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

В родительской сущности у меня есть кнопка, подобная этой:

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

Модальная икомпонент, который удаляет дочерний элемент, не был изменен.

Answer 1

Для тех, кто ищет тот же ответ:

При удалении дочернего элемента компонент передает событие следующим образом:

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

Мне нужно было только подписаться (в родительском компоненте)на событие, подобное этому:

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

и вызовите this.registerChangeInChildren() в ngOnInit(), и все работает, как указано.