Question

这是创建新项目的List和Form的常见模式。表单显示在引导模式上，它使用服务将项目发送到后端。如果正常或错误消息，服务将响应该项目。这个想法是通过List组件通知要添加的项目。表单使用新项目发出事件，但永远不会调用父方法。

列表

@Component({
  selector: 'app-item-list',
  template: `<div class="row">
  <div class="col-sm-4">
      <button type="button" (click)="createItem()">Create Item</button>
  </div>
</div>
<!-- Static modal -->
<app-item-form></app-item-form>

<div class="row" (itemSaved)="addItem($event)">
  <div *ngFor="let item of items>
    <div class="col-md-4 card-box">
      <app-item [item]="item"></app-item>
  </div>
</div>`
})
export class ItemListComponent {
  items: Item[];

  constructor(
    private router: Router,
    private itemService: ItemService) {
  }

  @ViewChild(ItemFormComponent) private itemFormComponent;
  createItem() {
    this.itemFormComponent.open();
  }

  // This should be called!
  addItem(event:any) {
    event.stopPropagation();
    if(event.item != undefined) {
      this.items.push(event.item);
    }
  }

}

表格

@Component({
  selector: 'app-item-form',
  template: `<div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" [config]="{backdrop: 'static'}"
     tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <div class="modal-header">
        <button type="button" class="close" aria-label="Close" (click)="childModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">{{ modalTitle }}</h4>
      </div>

      <div class="modal-body">
        <form *ngIf="item" class="form-horizontal" role="form">

          <div class="row">
            <div class="form-group col-xs-12">
              <input [(ngModel)]="item.title" type="text" placeholder="Item title" name="title" class="form-control"/>
            </div>
          </div>
 </form>

      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" (click)="childModal.hide()">Close</button>
        <button type="button" class="btn btn-primary" (click)="save(); childModal.hide()">Save changes</button>
      </div>
    </div>
  </div>
</div>
`
})
export class ItemFormComponent {
  item: Item = new Item();
  @Output() itemSaved = new EventEmitter<Item>();
  modalTitle = 'New Item';

  constructor(
    private itemService: ItemService,
    private route: ActivatedRoute) {
  }

  save() {
    this.ItemService
        .save(this.item)
        .then(it => {
          this.item = new Item();
          this.itemSaved.emit(it);
        })
        .catch(error => {}); 
  }

  @ViewChild('childModal') public childModal:ModalDirective;
  open() {
    this.childModal.show();
  }

}

Answer 1

父组件（ItemListComponent）需要绑定一个响应子事件有效负载（$ event）的事件处理程序。

您使用“row”类将事件处理程序添加到div。试试这个：

<!-- Static modal -->
<app-item-form (itemSaved)="addItem($event)"></app-item-form>

您可以通过官方文档中的事件了解有关亲子沟通的更多信息：https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#child-to-parent。

Answer 2

正确的地方：

<app-item-form (itemSaved)="addItem($event)">   //<<---put it here
</app-item-form>

错误的地方：

<div class="row" (itemSaved)="addItem($event)">  //<<---not needed here

Angular 2.1.0父组件未捕获子组件发出的事件

2 个答案: