如何使用 Eventemitter 将事件从父级广播到子级答案

【问题标题】：How to use Eventemitter to broadcast an event from a parent to children如何使用 Eventemitter 将事件从父级广播到子级
【发布时间】：2017-04-04 22:14:23
【问题描述】：

我有一个使用ngFor 多次实例化的组件。组件标签被包裹在一个指令标签内。我想使用EventEmitter 将父指令中的某些内容广播到子组件。我怎样才能做到这一点？

@Directive({
    selector : '[elementDir]'
})
export class ElementDirective
{
    constructor(eModel:ElementModel)
    {            
    }
    @Output() updatePosition = new EventEmitter();

    @HostListener('mousedown', ['$event']) onMouseDown(e) 
    {       
         this.eModel.elements[1] = {left : e.clientX, top : e.clientY};
         this.updatePosition.emit(1);
    }
}

组件：

@Component({
    selector : 'outline',
    template : `
       <div class="outline-v"></div>
       <div class="outline-v right"></div>
       <div class="outline-h"></div>
       <div class="outline-h bottom"></div>
    `
})
export class OutlineComponent implements AfterViewInit
{
    constructor(el:ElementRef,rdr:Renderer,eModel:ElementModel)
    {            
    }
    ngAfterViewInit() 
    {
        this.changePosition();
    }
    changePosition() 
    {
        let index = this.ElementRef.nativeElement.id.split('_').pop();
        this.rdr.setElementStyle(this.el.nativeElement, 'top', this.eModel.elements[index].top + 'px');
        this.rdr.setElementStyle(this.el.nativeElement, 'left', this.eModel.elements[index].left + 'px');
    }
}

HTML：

<div elementDir>
    <outline (updatePosition)="changePosition()"
         *ngFor="let el of eModel.elements; let i = index" 
          id="el_{{i}}">
    </outline>
</div>

ElementModel 是具有位置的元素的对象：

{elements:[{left:200, {left:432, top: 244}, {left:600, top: 500}]}

在上面的代码示例中，我有一个包装指令elementDir，其中包含outline 组件标签。该功能很简单，每个轮廓组件都根据来自 ElementModel 的相应顶部和左侧信息进行定位。假设我单击 elementDir 中的任意位置，第二个轮廓元素（在此示例中被选中）将定位到我单击的位置。在我的真实应用中，所选元素是动态的。我只是想让我的子组件监听父鼠标按下的位置。

【问题讨论】：

使用 Angular2，您不应该从父母“广播”到孩子。数据流：父母到孩子。事件流程：孩子到父母。所以我建议你提供一些关于你的 pb 的更多细节和一些代码，这样也许我们可以谈谈你的架构。
嗨，Maxime，我添加了我的代码。谢谢
在ElementDirective 中提供一个服务并注入到OutlineComponent 并使用它在它们之间进行通信。

标签： angular components angular2-directives eventemitter

【解决方案1】：

EventEmitter 不做任何广播。 EventEmitter 是使用模板绑定到事件

<my-component (someEvent)="..."

对于广播用例，使用可观察的共享服务。

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

【讨论】：