Javascript 将服务函数引用传递给子组件
在一个服务中,我有两个方法,它们都会命中不同的控制器来搜索我的数据库。我想创建一个共享子组件,它将在两个不同的地方使用,但是我需要每个实例能够专门调用其中一个服务方法。例如,以下是我的方法:Javascript 将服务函数引用传递给子组件,javascript,typescript,angular7,Javascript,Typescript,Angular7,在一个服务中,我有两个方法,它们都会命中不同的控制器来搜索我的数据库。我想创建一个共享子组件,它将在两个不同的地方使用,但是我需要每个实例能够专门调用其中一个服务方法。例如,以下是我的方法: // SERVICE searchOne(search: string){ // do some searching in Controller 1 } searchTwo(search: string){ // do some searching in Controller 2 } 我的共享子组件使用
// SERVICE
searchOne(search: string){
// do some searching in Controller 1
}
searchTwo(search: string){
// do some searching in Controller 2
}
我的共享子组件使用类似的方法来访问服务:
// CHILD COMPONENT
@Input(Function) func: Function;
componentSearch(search: string){
this.func(search);
}
但是,当尝试从父级传递函数时,这似乎不起作用,如下所示:
// PARENT COMPONENT
func = this.service.searchOne;
constructor(private service: Service){}
// PARENT COMPONENT.HTML
<app-child-component [func]="func"></app-child-component>
//父组件
func=this.service.searchOne;
构造函数(私有服务:服务){}
//父组件.HTML
如何将服务功能的访问或引用传递到我的子组件中?我已经为您的代码创建了一个工作堆栈Blitz 代码中的一些更正: 父组件:
export class AppComponent {
name = 'Angular';
func;
constructor(private service: AppService){
this.func = this.service.searchOne;
}
}
子组件
@Input() func: Function;
componentSearch(search: string){
this.func(search);
}