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

时间:2018-12-06 14:58:22

标签: javascript html angular twitter-bootstrap

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

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

这里有2个组成部分,

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

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

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

这是它的外观:

enter image description here

我的代码:

当我点击组件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

2 个答案:

答案 0 :(得分: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作为参数,就是这样!

答案 1 :(得分:0)

除了上面提到的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>