angular – 如何在模态组件关闭后刷新父组件

发布时间：2020-12-17 10:25:10 所属栏目：安全来源：网络整理

导读：我有一个组件,其中包含一个显示数据库行的表.该组件还有一个“添加”按钮. 当我单击此按钮时,会出现一个模式,其中包含一个表单,用于在数据库中添加新条目. 我可以将行保存到数据库,但我想刷新父组件中的表以显示新添加的条目. 我使用的代码是：在父组件中我

我有一个组件,其中包含一个显示数据库行的表.该组件还有一个“添加”按钮.

当我单击此按钮时,会出现一个模式,其中包含一个表单,用于在数据库中添加新条目.

我可以将行保存到数据库,但我想刷新父组件中的表以显示新添加的条目.

我使用的代码是：

在父组件中我打开模态：

<div>
    <a href="#responsive-modal" data-toggle="modal" data-target="#responsive-modal" class="btn btn-md btn-add animated flipInX flipInY lightSpeedIn slideInUp" (click)="createAgentie(agentie2)"><i class="fa fa-plus"></i> Add</a>
    <createagentie></createagentie>
</div>

TS：

@ViewChild(CreateAgentieComponent) createAgentie: any = {};
    CreateAgentiee(agentie2: any = {}) {

        this.createAgentie.myObject = agentie2;

        this.createAgentie.open();


    }

在子组件中：

<button type="button" (click)="submit()" class="btn btn-danger waves-effect waves-light" data-dismiss="modal">Save changes</button>

TS：

submit() {
        this.createagentieService.create(this.myObject)
            .subscribe(x => {
                console.log(x);
                this.myObject.denumire = "";
                this.router.navigate(['/vizualizareagentii']);

            });
    }

问题是this.router.navigate([‘/ vizualizareagentii’]);哪个是父组件的路由什么都不做.如何进入父组件并刷新它？

我将在父组件上打开模态并传入子组件的函数,该组件是在创建发生后传回新项的模式,然后将其添加到项列表中.我将给出一个ng-bootstrap引导的例子.

在ParentComponent ts中：

itemList : Item[] = [];

itemCreated(item: Item){
    itemList.push(item);
 }

在ParentComponent html中：

<button type="button" (click)="modal.showModal();">Add Item</button>
<item-creator #modal (itemCreated)="itemCreated($event)"></item-creator>

在ItemCreator组件的ts中：

@Output() itemCreated= new EventEmitter<Item>();
@ViewChild('itemCreateMdl') itemCreateMdl: ElementRef;
item : Item = new Item(); //make the form build out this item
constructor(private myService : Service,private modalService: NgbModal){}

showModal(){
   this.modalService.open(this.itemCreateMdl);
}

buttonPressedSaveItem(){
   this.myService.createTheThing(this.item).subscribe(returnedItem => {
     this.itemCreated.emit(returnedItem);//assuming you already unwrapped it from the json
   }
}

ItemCreate html是一个ng-bootstrap模式：

<ng-template #itemCreateMdl let-c="close" let-d="dismiss">
//add in the typical bootstrap modal-header and modal-body stuff
<div class="modal-footer">
        <button type="button" class="btn btn-primary" (click)="buttonPressedSaveItem();c('Close click');">Add</button>
    </div>
</ng-template>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!