Как я могу вызвать метод, который создан / расположен в родительском компоненте, в то время как я в дочернем компоненте

Question

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

И когда я нажимаю назаметьте, что он меняет цвет на красный, как будто он занят, но я не вижу его, пока не закрою окно и не вернусь снова.

Вот 2 компонента,

one cars-spot-list - родительский компонент, и car-spot сам является дочерним компонентом, поскольку он является частью списка.

Итак, что я хочу сделать, так это когда я нажимаю на автомобильное место, я обновляю свою базу данных, когда это место занято, и я хотел бычтобы снова вызвать мой метод getCarSpotsByArea (), но он находится в parent-component, поэтому мой вопрос: как я могу вызвать родительский метод из дочернего компонента?

Я мог бы переместить его в service, но я бы хотел этого избежать.

Вот как это выглядит:

Мой код:

Когда я нажимаю дочерний компонент car-spot, например, Spot 1, это происходит:

 onClick(carSpot: CarSpot) {
        this._carSpotService.changeCarSpotState(carSpot).subscribe(
          // Successful responses call the first callback.
          () => {
           // CALL AGAIN SOMEHOW METHOD FROM A PARENT TO REFRESH MY VIEW 
           // for example: getCarSpotsByArea(carSpot.areaId);
          },
          (err: HttpErrorResponse) => {
            if (err.error instanceof Error) {
              console.log('An error occurred:', err.error.message);
            } else {
              console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
            }
          }
        );
      };
    }

Родительский компонент: car-spot-list компонент

    getCarSpotsByArea(areaId: string) {
    this._carSpotService.getCarSpotsByAreaId(areaId)
      .subscribe(
      data => {
        this.carSpots = data;
      },
      // Errors will call this callback instead:
      (err: HttpErrorResponse) => {
        if (err.error instanceof Error) {
          // A client-side or network error occurred. Handle it accordingly.
          console.log('An error occurred:', err.error.message);
        } else {
          // The backend returned an unsuccessful response code.
          // The response body may contain clues as to what went wrong,
          console.log(`Backend returned code ${err.status}, body was: ${JSON.stringify(err.error)}`);
        }
      }
    );

Answer 1

В дополнение к EventEmitter, как упомянуто выше, есть 2 других способа вызвать родительский компонент из дочерних компонентов

1) Вставить родительский компонент в дочерний компонент

export class ChildComponent  {
  constructor(private parent: ParentComponent) {

  } 

  callParentMethod() {
    this.parent.methodHandler();
  }
}

2) Если выиметь контроль над ParentComponent, вы можете использовать exportAs:

@Component({
  ...
  exportAs: 'parent'
})
export class ParentComponent  {
  ...
}

export class ChildComponent  {
  @Input() handler: Function;
  ... 
  callParentMethod() {
    this.handler();
  }
}  

В HTML вы можете ссылаться на него как:

<parent #p="parent">
  <child [handler]="p.methodHandler"></child>
</parent>

Answer 2

Что я сделал:

В моем дочернем компоненте я создал свойство, которое будет выдавать нужное мне значение:

@Output() onUpdateCarSpot = new EventEmitter<string>();


onClick(carSpot: CarSpot) {
    this._carSpotService.changeCarSpotState(carSpot).subscribe(
      // Successful responses call the first callback.
      () => {
       // Here is the place where I needed to call parent method so here
       // on success callback I've emitted value
          this.onUpdateCarSpot(carSpot.areaId);
      },
      (err: HttpErrorResponse) => {
        if (err.error instanceof Error) {
          console.log('An error occurred:', err.error.message);
        } else {
          console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
        }
      }
    );
  };
}

А в родительском компоненте car-spot-list.component.html Я сделал следующее(является частью):

<car-spot (onUpdateCarSpot)="getCarSpotsByArea($event)"></car-spot>

Я добавил (onUpdateCarSpot), который фактически является именем моего Output генератора событий из моего дочернего компонента, и я просто сказал:

Хорошо, когда я что-то излучаю (он находится на обратном вызове в дочернем компоненте), вызовите метод с именем getCarSpotsByArea, и я передал / выпустил areaId, потому что метод моего родителя getCarSpotsByArea принимает и areaId в качестве аргументаи это все!