У меня есть компонент, который создается несколько раз с использованием 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-й элемент контура (который выбран в этом примере) будет расположен там, где я щелкнул. В моем реальном приложении выбранные элементы являются динамическими. Я просто хотел, чтобы мои дочерние компоненты прослушивали родительскую позицию мыши.
ElementDirective
и внедрите ее вOutlineComponent
и используйте ее для связи между ними. - person Günter Zöchbauer   schedule 21.11.2016