删除元素后更新列表

时间:2018-10-18 20:00:02

标签: angular jhipster

我有一个使用JHipster 5.5.0生成的项目,并且我有2个实体:父级和子级。

当我看到父母的详细信息时,我会列出孩子。当我想删除一个孩子时,我使用了孩子的模态,它应该按原样工作。

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

儿童的角度代码:

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>

模式,删除孩子的组件都没有被修改。

1 个答案:

答案 0 :(得分:0)

对于那些寻求相同答案的人:

删除子对象时,组件将广播事件,如下所示:

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

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

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

并在this.registerChangeInChildren()中调用ngOnInit(),一切按预期进行。