如何使用Eventemitter將事件從父項廣播到兒童

我有一個組件，它使用ngFor多次實例化。組件標籤被封裝在指令標籤內。我想用EventEmitter來從父指令向子組件廣播一些東西。我怎樣才能做到這一點？如何使用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中的任意位置，第二個大綱元素（在此示例中選定）將定位到我點擊的位置。在我的真實應用中，選定的元素是動態的。我只是想讓我的孩子的組件傾聽父母的mousedown位置。

來源

2016-11-21 Emmanuel Sayson

隨着Angular2你不應該以「廣播」父母和孩子。數據流：父母給孩子。活動流程：兒童與家長。所以我建議你提供一些關於你的pb的更多細節和一些代碼，或許我們可以談談你的架構。 – Maxime

嗨馬克西姆，我加了我的代碼。謝謝 –

在'ElementDirective'中提供一個服務，並將其注入到'OutlineComponent'中，並用它來在它們之間進行通信。 –