Как использовать Eventemitter для трансляции события от родителя к детям

У меня есть компонент, который создается несколько раз с использованием 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, 2-й элемент контура (который выбран в этом примере) будет расположен там, где я щелкнул. В моем реальном приложении выбранные элементы являются динамическими. Я просто хотел, чтобы мои дочерние компоненты прослушивали родительскую позицию мыши.


person Emmanuel Sayson    schedule 21.11.2016    source источник
comment
С Angular2 вы не должны транслировать от родителя к дочернему. Поток данных: от родителей к детям. Поток событий: от детей к родителям. Поэтому я предлагаю вам предоставить более подробную информацию и немного кода о вашем pb, чтобы, возможно, мы могли поговорить о вашей архитектуре.   -  person maxime1992    schedule 21.11.2016
comment
Привет Максим, я добавил свой код. Спасибо   -  person Emmanuel Sayson    schedule 21.11.2016
comment
Предоставьте услугу в ElementDirective и внедрите ее в OutlineComponent и используйте ее для связи между ними.   -  person Günter Zöchbauer    schedule 21.11.2016


Ответы (1)


EventEmitter не занимается вещанием. EventEmitter использовать привязку шаблона к событиям

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

Для широковещательных вариантов использования используйте общий сервис с наблюдаемыми.

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

person Günter Zöchbauer    schedule 21.11.2016