angular - 是否可以将服务注入(inject)到子组件中？

Question

我遇到一种情况，我发现自己在父组件中复制逻辑，以从服务器获取数据来填充下拉列表(这还包括处理分页和搜索)。因此，我想将此逻辑移至下拉组件，我可以在其中定义一次。

但是，这需要我定义下拉组件应使用哪个服务来获取其数据。我想在父级中定义下拉组件时定义它。

例如

<dropdown [service]="myService"></dropdown>

然后我可以在下拉组件上调用此函数，传递参数，例如分页和搜索参数。

this.service(x,y,z).subscribe()

这可能吗？

我也愿意接受任何其他建议，特别是如果我以错误的方式看待这个问题？

Answer 1

是的，这是可能的。你可以这样做(StackBlitz):

1- 在接收服务的 DropDownComponent 中定义一个 @Input() 属性(在本例中为了更好的设计，我创建了一个接口(interface)，Logger).

@Component({
  selector: 'dropdown',
  template: `Dropdown using {{this.logger.getName()}}`
})
export class DropDownComponent implements OnInit {

  @Input() public logger: Logger;

  constructor() { }

  ngOnInit() {
    console.log(`DropDown, I'm using `, this.logger.getName());
  }
}

2- 在使用下拉菜单的组件中定义 logger 属性的值。

@Component({
  selector: 'my-app',
  template: `
  <dropdown [logger]="this.logger1Service" ></dropdown>
  <br />
  <dropdown [logger]="this.logger2Service" ></dropdown>
  `
})
export class AppComponent implements OnInit {

  constructor(
    public logger1Service: Logger1Service,
    public logger2Service: Logger2Service
    ) { }

  ngOnInit() {
    console.log('Hello from AppComponent');
    console.log('calling logger1Service.info() with message X', this.logger1Service.info('X'));
    console.log('calling logger2Service.info() with message Y', this.logger1Service.info('Y'));
  }
}

3- 并定义可以为此下拉列表提供的服务。

// logger.interface
export interface Logger {
  info(text: string);
  getName();
}

---

// logger1.service
import { Injectable} from '@angular/core';

import { Logger } from './logger.interface';

@Injectable({ providedIn: 'root' })
export class Logger1Service implements Logger {

  constructor() { }

  info(text: string) {
    console.log('Logger 1:', text);
  }

  getName() {
    return 'Logger1Service';
  }
}

---

// logger2.service
import { Injectable} from '@angular/core';

import { Logger } from './logger.interface';

@Injectable({ providedIn: 'root' })
export class Logger2Service implements Logger {

  constructor() { }

  info(text: string) {
    console.log('Logger 2:', text);
  }

  getName() {
    return 'Logger2Service';
  }
}