Javascript 如何将回调函数（带有http请求）从父组件传递到子组件

我想将一个具有http请求的函数从父组件传递到子组件，然后从子组件执行该请求

我的代码如下所示：

// myService
constructor(private http: HttpClient)
getIds(id) {
    // return of(['a', 'b', 'c', id]); with this works
    return this.http.get(apiUrl)  // with this doesnt work
 }

// parentComponent.ts
callbackFunction = this.myService.getIds;
constructor(private myService: MyService) { }

// parentComponent.html
<child-component [callbackRequest]="callbackFunction"></child-component>

// childComponent.ts
@Input() callbackRequest;
ngOnInit() {
   this.callbackRequest('d');
}

//myService
构造函数（专用http:HttpClient）
GetID（id）{
//返回（['a'，'b'，'c'，id]）；与此作品
返回this.http.get（apirl）//此操作无效
}
//parentComponent.ts
callbackFunction=this.myService.getIds；
构造函数（私有myService:myService）{}
//parentComponent.html
//childComponent.ts
@Input（）回调请求；
恩戈尼尼特（）{
此.callbackRequest（'d'）；
}

最让我困惑的是，如果我从服务返回一个可观察的构建自of，那么它是否有效。 在调试时，我看到如果对服务的调用到达。 我得到的错误如下： 错误类型错误：无法读取未定义的属性“get”

您可以执行以下操作：

//myService
构造函数（专用http:HttpClient）
GetID（id）{
//返回（['a'，'b'，'c'，id]）；与此作品
返回this.http.get（apirl）//此操作无效
}
//parentComponent.ts
callbackFunction=this.myService.getIds.bind（this.myService）；
构造函数（私有myService:myService）{}
//parentComponent.html
//childComponent.ts
@Input（）回调请求；
恩戈尼尼特（）{
此.callbackRequest（'d'）；
}

您可以这样做：

//myService
构造函数（专用http:HttpClient）
GetID（id）{
//返回（['a'，'b'，'c'，id]）；与此作品
返回this.http.get（apirl）//此操作无效
}
//parentComponent.ts
callbackFunction=this.myService.getIds.bind（this.myService）；
构造函数（私有myService:myService）{}
//parentComponent.html
//childComponent.ts
@Input（）回调请求；
恩戈尼尼特（）{
此.callbackRequest（'d'）；
}
当使用
@Input
绑定在函数中传递其引用时，
getIds
函数中的
关键字的含义将丢失。当您返回（[…]）
的
时，它会起作用，因为没有使用
此
。有关回调中的
此
关键字含义的规范帖子，请参阅

有两种解决方案

使用
bind
-参见@GabrielSereno的帖子
使用箭头函数
服务

publicgetid=（id）=>{
返回this.http.get（apirl）；
}

组件

callbackFunction:any；；
构造函数（私有myService:myService）{}
恩戈尼尼特（）{
this.callbackFunction=this.myService.getIds；
}

模板


当使用
@Input
绑定在函数中传递其引用时，
getIds
函数中的
关键字的含义将丢失。当您返回（[…]）
的
时，它会起作用，因为没有使用
此
。有关回调中的
此
关键字含义的规范帖子，请参阅

有两种解决方案

使用
bind
-参见@GabrielSereno的帖子
使用箭头函数
服务

publicgetid=（id）=>{
返回this.http.get（apirl）；
}

组件

callbackFunction:any；；
构造函数（私有myService:myService）{}
恩戈尼尼特（）{
this.callbackFunction=this.myService.getIds；
}

模板

使用回调函数是否有特定的原因

通常，我会尝试将一个组件设置为“智能”和一个“哑”。

在您的案例中，父节点决定做什么（哪个HTTP请求），子节点决定什么时候做。也许孩子也应该显示结果。

因此，我决定在类似的情况下，我的孩子将通知家长何时运行请求，然后家长运行请求并将结果提供给孩子

是的，那样的话，我不仅需要一个输入，我的孩子还需要一个输入和一个输出。另一方面，我的孩子有一个清晰定义的输入接口。如果我只提供一个回调方法，那么回调可能会返回任何内容

而且我的孩子几乎没有什么“逻辑”。所有的魔力都在父母身上。这使得为子组件编写单元测试非常容易。对父母来说，只有一个被嘲笑的孩子是很容易的

是的，JavaScript（因此也包括TypeScript）允许类似于
.bind（）
的东西。但根据我的经验，它似乎能很快解决问题，但真正的努力要晚一些。它更难理解，也更难调试。因此，我通常避免这样做

只是解决问题的另一种方法。选择你喜欢的部分，然后我选择其余部分：-
)使用回调函数是否有特定的原因

通常，我会尝试将一个组件设置为“智能”和一个“哑”。

在您的案例中，父节点决定做什么（哪个HTTP请求），子节点决定什么时候做。也许孩子也应该显示结果。

因此，我决定在类似的情况下，我的孩子将通知家长何时运行请求，然后家长运行请求并将结果提供给孩子

是的，那样的话，我不仅需要一个输入，我的孩子还需要一个输入和一个输出。另一方面，我的孩子有一个清晰定义的输入接口。如果我只提供一个回调方法，那么回调可能会返回任何内容

而且我的孩子几乎没有什么“逻辑”。所有的魔力都在父母身上。这使得为子组件编写单元测试非常容易。对父母来说，只有一个被嘲笑的孩子是很容易的

是的，JavaScript（因此也包括TypeScript）允许类似于
.bind（）
的东西。但根据我的经验，它似乎能很快解决一个问题，但真正的努力来了