将服务从子组件传递到父组件

Question

因此，我有一个基本组件（ListComponent）和一个父组件（Businesses2ListComponent）。 这个想法是我们有多个表/类型的列表，这些表/类型都是从ListComponent派生的。 因此，我们必须通过正确的服务。

在此示例中，我想将BusinessService（扩展BaseService）传递给BaseComponent。

这是ListComponent：

 @Component({ selector: 'app-list', templateUrl: './list.component.html', styleUrls: ['./list.component.scss'] }) export class ListComponent<S extends BaseService<T, L>, T, L> implements OnInit { constructor(private viewContainerRef: ViewContainerRef, private domElement: ElementRef, private ngForage: NgForage, private route: ActivatedRoute, private router: Router, private injector: Injector, private dataService: S) { } } 

这是我的Business2ListComponent：

 @Component({ selector: 'app-businesses2-list', templateUrl: './businesses2-list.component.html', styleUrls: ['./businesses2-list.component.scss'] }) export class Businesses2ListComponent extends ListComponent<BusinessService, Business, BusinessList> implements OnInit { constructor(viewContainerRef: ViewContainerRef, domElement: ElementRef, ngForage: NgForage, dataService: BusinessService, route: ActivatedRoute, router: Router, injector: Injector) { super(viewContainerRef, domElement, ngForage, route, router, injector, dataService); } ngOnInit() { } } 

现在，这是我尝试运行此错误时遇到的错误：

我认为这是最后一个争论，但是我还能做什么？

Answer 1

当Angular显示问号时，它找不到您要注入的对象，这可能有多种原因，但是模块文件是一个很好的起点。 您是否已将实例化的BusinessService添加到模块提供程序？

Answer 2

您不能在构造函数上执行以下操作： private dataService: S 。

2个选项：您可以将构造函数更改为如下所示：

private dataService: new () => S

调用super() ，您可能在BusinessListComponent构造函数上遇到TSLint错误，但它可以工作。

另外，在您的情况下，我更喜欢使用OOP，因为我看不到在ListComponent<BusinessService, Business, BusinessList>上传递BusinessService任何理由。 这是显示此方法的堆叠闪电战 。

您的BusinessListComponent在哪里

export class BusinessListComponent extends ListComponent<Business, BusinessList> implements OnInit {

  constructor(//...your args, private businessService: BusinessService) { 
    super(// ... your args, businessService);
  }

  ngOnInit() {
  }
}

您的ListComponent变为：

export class ListComponent<T, L> implements OnInit {
  constructor(private dataService: BaseService<T, L>) { 
  }
  ngOnInit() {
  }
}

以及您的BusinessService

export class BusinessService extends BaseService<Business, BusinessList> {
  constructor() {
    super();
  }
}

希望能有所帮助。