Question

我有一个名为 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 中单击删除按钮时，该事件仅冒泡到它的直接父项 ItemsListComponent ，但不会使其成为 ItemsComponent < / strong>除非我将相同的事件发射器功能添加到 ItemsListComponent 。

臭臭 ItemsListComponent ：

@Output() doDelete = new EventEmitter(); deleteItem(item) { this.doDelete.emit(item); }

它以这种方式工作，但 ItemsListComponent 现在与 ItemsComponent 共享代码气味，因为它们都具有相同的事件发射器内容并且事件必须从一个组件传递到另一个在它的上升。

有更好的方法吗？

Answer 1

正如您所知，自定义角度事件不会冒泡，因此如果您有一个深度嵌套的组件，并且您希望将事件传递给更高的组件，则两者之间的每个组件都必须向上委派事件。

另一种选择是将def get_results(service, view_id): return service.data().ga().get( ids='ga:' + view_id, start_date='2015-01-01', end_date='2016-12-31', metrics='ga:pageviews,ga:avgTimeOnPage', dimensions='ga:pageTitle,ga:week', sort='-ga:pageviews’, max_results='10000', filters='ga:pagepath==url' ).execute()功能移动到注入其中一个较低级别组件的服务。这样，函数可以在它发生的时刻被调用，而不是必须在视图层次结构中冒泡。

Angular 2：如何通过多个嵌套组件发出事件？

1 个答案: