Question

我有一个使用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中的任何位置，第二个大纲元素（在此示例中选择）将定位到我单击的位置。在我的真实应用中，所选元素是动态的。我只是想让我的子组件听取父母mousedown的位置。

Answer 1

EventEmitter不进行任何广播。 EventEmitter将使用模板绑定到事件

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

对于广播用例，请使用带有可观察数据的共享服务。

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

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

1 个答案: