将服务函数引用传递给子组件

Question

我在一个服务中有两种方法，它们都使用不同的控制器来搜索我的数据库。我想制作一个共享的子组件，它将在两个不同的地方使用，但是我需要每个实例都能够专门调用其中一种服务方法。例如，这些是我的方法：

// 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>

如何将服务功能的访问或引用传递到我的子组件中？

Answer 1

我已经为您的代码创建了一个可用的 Stackblitz here

您的代码中的一些更正：

父组件：

export class AppComponent  {
  name = 'Angular';
  func;

  constructor(private service: AppService){
    this.func = this.service.searchOne;
  }
}

子组件

  @Input() func: Function;
  componentSearch(search: string){
    this.func(search);
  }

将服务函数引用传递给子组件

Pass service function reference to child component

javascript

typescript

angular7