关闭模态对话框时刷新父组件列表答案

【问题标题】：Refreshing parent's component list when closing the modal dialog关闭模态对话框时刷新父组件列表
【发布时间】：2019-01-28 11:31:43
【问题描述】：

我在一个名为 AddPerson 的组件中有一个添加按钮，当用户单击它时会显示一个模式对话框。人员列表显示在 PersonList 组件的列表中。 AddPerson 和 PersonList 组件都是在 ManagePersons 组件中调用的，所以当 AddPerson 组件中的对话框关闭时，应该刷新 Person 列表。

我正在使用角度 6。

人员列表：

<table class="table table-striped" *ngIf="persons && persons.length > 0">
    <thead>
    <tr>
        <th class="col-md-1">Name</th>
        <th class="col-md-1">Age</th></tr>
    </thead>
    <tbody>
    <tr *ngFor="let mp of persons">
        <td class="col-md-2">
        </td>
        <td class="col-md-1">
            {{mp.Name}}
        </td>
        <td class="col-md-1">
            {{mp.Age}}
        </td>
      </tr>
    </tbody>
</table>

添加人：

<button (click)="showModal()"
    class="btn-primary">Add</button>
<div class="modal" id="add-person" style="display: none">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" aria-label="Close" data- 
dismiss="modal">
                <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">Add</h4>
        </div>
        <div class="modal-body">
            <div class="row">
                <label class="col-md-2 text-right">Person Name
                </label>
                <div class="col-md-4">
                    <input [ngModel]="personName" type="number" 
    class="form-control" (ngModelChange)="personName = $event" />
                </div>
                <label class="col-md-2 text-right">Person Age
                </label>
                <div class="col-md-4">
                    <input [ngModel]="personAge" type="number" 
    class="form-control" (ngModelChange)="personAge = $event" />
                </div>
            </div>
         </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data- 
    dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" 
    (click)="onAdd()">Save Person</button>
        </div>
    </div>
</div>
</div>

经理人：

 <div class="panel-body">
    <app-add-person>
    </app-add-person>
    <app-peron-list>
    </app-peron-list>
</div>

【问题讨论】：

我尝试将 PersonList 组件添加到 AddPerson 组件并调用 PersonList 的 ngOnInit()。我正在获取刷新的数据，但页面没有刷新。

标签： angularjs modal-dialog page-refresh

【解决方案1】：

尝试在关闭子模态之前调用父组件并使用所需信息更新父组件：

import { Output, EventEmitter } from '@angular/core'; 


class ChildComponent {
  @Output() someEvent = new EventEmitter<string>();

  callParent() {
    this.someEvent.next('something');
  }
}

【讨论】：