我正在开发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
答案 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>