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

调用BusinessListComponent时，在super()构造函数上可能会出现TSLint错误，但是它可以工作。

在您的情况下，我更倾向于使用OOP，因为我看不出有任何理由将BusinessService传递给您的ListComponent<BusinessService, Business, BusinessList>。这是显示此方法的stackblitz。

您的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();
  }
}

希望有帮助。

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

2 个答案: