Question

我有一个带有事件的组件，如下所示：

<menu-elem (onClick)="reallyCoolEvent($event)"></custom-component>

现在，我可以使用reallyCoolEvent中的EventEmitter触发我的custom-component。

@Output() onClick= new EventEmitter();
this.onClick.emit(stuff);

像这样，在我的其他组件中，将调用函数reallyCoolEvent，并将stuff传递给该函数。这非常有效！

现在，让我们说，我想出于任何原因复制该组件，我想从原始事件中触发相同的事件。现在，我正在浏览我的onClick列表，如果它们符合我的标准，我会将它们存储在我在页面上其他位置显示的列表中。当我从那里触发onClick时，事件永远不会被触发。

<menu>
  <menu-elem label="Action 1" (onClick)="superCoolEvent($event)"></menu-elem>
  <menu-elem label="Action 2" (onClick)="superCoolEvent2($event)"></menu-elem>
  <menu-elem label="Action 3" (onClick)="superCoolEvent3($event)"></menu-elem>
</menu>

在menu：

模板：

<div>
   <ng-content></ng-content>
</div>
<sub-menu *ngFor="let subMenu of subMenus" [style.top]="subMenu.top" [style.left]="subMenu.left" [items]="subMenu.items"></sub-menu>

在sub-menu：

模板：

<menu-elem *ngFor="let item of items" [label]="item.label"></menu-elem>

通过这样做，我希望能够触发onClick中的<div class="here">并仍然从原始模板触发事件：reallyCoolEvent($event)。我不知道我是否可以这样做。当然onClick未设置，因为我不再拥有模板中的数据。或者至少，我不知道如何获取数据。

我到目前为止唯一的解决方案是复制我的条目：

<menu>
  <menu-elem label="1" (onClick)="superCoolEvent($event)"></menu-elem>
  <menu-elem label="2" (onClick)="superCoolEvent2($event)"></menu-elem>
  <menu-elem label="3" (onClick)="superCoolEvent3($event)"></menu-elem>
  <div class="test">
    <menu-elem label="1" (onClick)="superCoolEvent($event)"></menu-elem>
    <menu-elem label="2" (onClick)="superCoolEvent2($event)"></menu-elem>
    <menu-elem label="3" (onClick)="superCoolEvent3($event)"></menu-elem>
  </div>
</menu>

根据我的标准，我可以显示或不显示，但我不喜欢这种方式，因为模板变得太大而没有。

Answer 1

您的基本问题是自定义事件不会在Angular中冒泡。

由于您的menu看起来像这样：

<div>
   <ng-content></ng-content>
</div>
<sub-menu *ngFor="let subMenu of subMenus" [items]="subMenu.items"></sub-menu>

上述模板中sub-menu内触发的任何事件都不会在sub-menu之外自动提供。

因此，如果您希望customEvent模板中的sub-menu在sub-menu之外可用，则必须手动传播该事件。类似的东西：

<div>
   <ng-content></ng-content>
</div>
<div class="here">
  <sub-menu *ngFor="let item of items" label="item.label" (submenuCustomEvent)="menuCustomEvent.emit($event)"></sub-menu>
</div>

其中submenuCustomEvent是EventEmitter的{{1}}属性，而sub-menu属性为menuCustomEvent的{{1}}。

修改

这意味着您的EventEmitter必须看起来像：

menu

，您的sub-menu变为：

@Component({ ..... template: ` <menu-elem *ngFor="let item of items" [label]="item.label" (customEvent)="submenuCustomEvent.emit($event) > </menu-elem> ` }) export class Submenu { ..... @Output() submenuCustomEvent = new EventEmitter(); .... }

因此，您现在使用menu的模板如下所示：

@Component({ ..... template: ` <div> <ng-content></ng-content> </div> <sub-menu *ngFor="let subMenu of subMenus" [items]="subMenu.items" (submenuCustomEvent)="menuCustomEvent.emit($event)" > </sub-menu> ` }) export class Menu { ..... @Output() menuCustomEvent = new EventEmitter(); .... }

注意事项：

如果您需要区分menu嵌套在<menu (menuCustomEvent)="superCoolEvent($event)"> <menu-elem label="Action 1" (customEvent)="superCoolEvent($event)"></menu-elem> <menu-elem label="Action 2" (customEvent)="superCoolEvent2($event)"></menu-elem> <menu-elem label="Action 3" (customEvent)="superCoolEvent3($event)"></menu-elem> </menu>内的menu-elem事件，您可能需要在sub-menu发出的事件中添加一些其他信息。

我在示例中为submenuCustomEvent和menu命名了事件发射器以突出显示差异，但您可以在代码中使用相同的事件发射器名称（即调用所有嵌套事件发射器sub-menu）

在此方案中，服务可能有助于避免通过组件层次结构手动连接事件发射器。如果点击onClick内的menu而没有中间事件传播
，则可以使用服务直接通知您使用menu-elem的顶级组件/ LI>

最后，您使用的是自定义sub-menu事件。但是，如果直接使用浏览器onClick事件，则可以避免手动传播，因为浏览器click事件会传播。但是，您无法控制所发出事件的形状，因此存在此限制。

Answer 2

我不确定我是否完全了解你。但是，您可以将子组件的引用注入子组件并使用父组件的偶数组。

 constructor(private myParent: Parent) {}

 go() {
    this.myParent.custometEvent.emit(data);
 }

在angular2

2 个答案: