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

Question

Я использую angular -resize-event для прослушивания изменения размера моих предметов.

Поэтому я могу прослушивать любой элемент, используя <div (resized)="onResized($event)"></div>

Но Мне нужно использовать это во вложенном компоненте для прослушивания родителя.

Я использую мой ChartComponent в моей WidgetComponent функции инициализации, как показано ниже:

Функция инициализации ChartComponent:

ngOnInit() {
     let chartComponent = this.elementRef.nativeElement.parentElement;
     let widgetContainerComponent = chartComponent.parentElement;
     let cardBody = widgetContainerComponent.parentElement;

     this.renderer.listen(cardBody, 'resized', (event) => {
       console.log(event)
    })
}

Но это не работает. Но если я добавлю прослушиватель кликов, он будет работать.

    this.renderer.listen(cardBody, 'click', (event) => {
       console.log(event)
    })

Я хочу прослушать родительское resized событие от дочернего компонента. Если размер родительского элемента изменится, я установлю ширину и высоту диаграммы в дочернем компоненте (ChartComponent).

Как установить событие resized?

Answer 1

Если вы хотите, чтобы ваш дочерний компонент слушал от родителя, вы можете использовать EventEmitter. Пример;

В свой дочерний компонент добавьте EventEmitter:

@Input() private uploadSuccess: EventEmitter<boolean>;

Дополнительно в childComponent.ts подпишитесь на событие:

ngOnInit() {
  if (this.uploadSuccess) {
   this.getEvent.subscribe(data => {
     // Do something in the childComponent after parent emits the event.
   });
  }
}

Родительский компонент

В ParentComponent. html

<child-component  [uploadSuccess] = "uploadSuccess" > </child-component>

В ParentComponent.ts

private uploadSuccess: EventEmitter<boolean> = new EventEmitter();

  onImageUploadSuccess(event) {
    console.log('Image Upload succes');
    if (event.code === 'OK' && this.maxUploadLimit > 0) {
      this.galleryImagesCount = this.galleryImagesCount + 1;
      this.maxUploadLimit = this.maxUploadLimit - 1;
     }

      // The parent emits the event which was given as `@Input` variable to the child- 
   component
     this.uploadSuccess.emit(true);
   }