小编Tys*_*son的帖子

我有一个名为ItemsComponent的 "智能"组件和两个嵌套的"哑"组件,ItemsListComponent和ItemComponent.

ItemsComponent的html模板包含ItemsListComponent.

// ItemsComponent
<div>
  // ItemsListComponent
  <app-items-list
    [items]="items"
    (doDelete)="deleteItem($event)"
  >
  </app-items-list>
<div>

它有一个名为deleteItem的函数:

deletItem(item) {
  // code to handle item deletion...
}

ItemsListComponent包含ItemComponent:

// ItemsListComponent    
<ul *ngFor="let item of items">
  // ItemComponent
  <app-item
   [item]="item"
   (doDelete)="deleteItem($event)"
  >
  </app-item>
</ul>

所以html结构是这样的:

ItemsComponent (app-items)
    - ItemsListComponent (app-items-list)
        - ItemComponent (app-item)

ItemComponent有一个按钮

<button (click)="deleteItem(item)">

和deleteItem的事件发射器:

@Output() doDelete = new EventEmitter();

deleteItem(item) {
  this.doDelete.emit(item);
}

当在ItemComponent中 …