在子组件中时，如何调用在父组件中创建/定位的方法

Question

我正在开发Angular应用，该应用基本上是小型应用，可以显示汽车的位置， 汽车可能位于不同的区域（例如车库中，车库外）。

当我单击该点时，它就像从拍摄时​​一样变成红色，但是直到关闭窗口并再次返回时我才能看到它。

这里有2个组成部分，

一个cars-spot-list是父级组件，car-spot本身是子级组件，因为它是列表的一部分。

所以我想做的是，当我单击汽车位置时，我正在更新数据库，因为该位置被占用了，我想再次调用我的方法getCarSpotsByArea（），但是它位于{{ 1}}， 所以我的问题是如何从子组件中调用父方法？

我可以将其移至parent-component，但我想避免这种情况。

这是它的外观：

我的代码：

当我点击子组件service（例如Spot 1）时，发生了这种情况：

car-spot

父级组件： 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

Answer 1

我做了什么：

在子组件中，我创建了一个属性，该属性将发出我需要的值：

@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)，它实际上是我的Child组件中的Output事件发射器的名称，我只是简单地告诉了我们：

好的，当我发出一些东西（它在子组件的回调中）时，调用一个名为getCarSpotsByArea的方法，并且我已经传递/发出了areaId，因为我父母的方法getCarSpotsByArea接受和areaId作为参数，就是这样！

Answer 2

除了上面提到的EventEmitter，还有两种从子组件中调用父组件的方法

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>