Question

我在名为AddPerson的组件中有一个添加按钮，该组件在用户单击时显示模式对话框。人员列表显示在PersonList组件的列表中。 AddPerson和PersonList组件都在ManagePersons组件中被调用，因此在AddPerson组件中关闭对话框时，应刷新“人员”列表。

我正在使用角度6。

PersonList：

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

AddPerson：

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

ManagerPerson：

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

Answer 1

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

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


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

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

关闭模式对话框时刷新父级的组件列表

1 个答案: