Поймать событие родственного компонента

Question

Мое приложение выглядит следующим образом:

<my-app> 
    <my-toolbar></my-toolbar> 
    <my-cube-container></my-cube-container > 
</my-app> 

Я хотел бы общаться с my-toolbar к my-cube-container. Я посылаю событие на панели инструментов:

@Component({ 
    selector: 'my-toolbar', 
    template: `... 
        <i class="fa fa-search-minus ic" (click)='onZoom(-1)' aria-hidden="true"></i> 
        `, 
}) 
export class ToolbarComponent { 
@Output() zoomEvent: EventEmitter<number> = new EventEmitter(); 

    onZoom(value:number){ 
    console.log('event sent'); 
    this.zoomEvent.emit(value); 
    } 
} 

И сначала я хотел поймать событие в собрата, который my-cube-container (см структуру приложения выше). Однако я читал, что это отношение испускающего события и уловки исключительно зарезервировано для общения с родителями. ** Это так? **

Итак, я попытался установить связь с родителем вместо этого (и создать в будущем еще один eventEmitter, чтобы я мог поймать событие в моем целевом компоненте my-cube-container). Однако я до сих пор не поймал это событие.

@Component({ 
    selector: 'my-app', 
    template: ` 
       <my-toolbar></my-toolbar> 
       <my-cube-container (zoomEvent)="onZoom($event)"></my-cube-container> 

      ` 
}) 
export class AppComponent { 
    onZoom(val){ 
    console.log("event catched"); 
    } 
} 

Что я делаю неправильно? Мне нужно что-то изменить в ngModul?

Answer 1

Вы можете использовать переменные шаблона для ссылки на братьев и сестер в шаблоне

<my-toolbar (zoomEvent)="container.onZoom($event)"></my-toolbar> 
<my-cube-container #container></my-cube-container >