Question

TypeScript 循环依赖

2019-08-01

3319

angular typescript extends

我有 2 个类，类 A 和类 B。类 B 扩展了类 A，这样我就可以访问类 A 的实例和服务。类 B 有一些我将在类 A 中使用的函数。当我实现这个时，出现了循环依赖错误，现在我收到一个浏览器错误：

"tslib.es6.js:25 Uncaught TypeError: Object prototype may only be an Object or null: undefined".


import { BuyerCardComponent} from './buyer-card.component'

export class BuyerCardExtended extends BuyerCardComponent{
  func a(){
    do_something;
  }
}


import { BuyerCardExtended } from './buyer-card-extended'

class BuyerCardComponent {
constructor(private buyerCardExtended: BuyerCardExtended){}
  func b(){
    this.buyerCardExtended.a()
  }
}

检测到循环依赖时出现警告： src/app/components/buyer/products/buyer-card/buyer-card.component.ts -> src/app/components/buyer/products/buyer-card/buyer-card-extended.ts -> src/app/components/buyer/products/buyer-card/buyer-card.component.ts

浏览器：

"tslib.es6.js:25 Uncaught TypeError: Object prototype may only be an Object or null: undefined"

Answer 1

如果要从父类调用子类方法，请使用@ViewChild 装饰器。

import { BuyerCardExtended } from './buyer-card-extended'

class BuyerCardComponent implements AfterViewInit {
@ViewChild(BuyerCardExtended) childCmp : BuyerCardExtended;
constructor(){}
ngAfterViewInit(){
  func b(){
    this.childCmp.a(); }
  }
}

另请参阅此 stackoverflow 线程

Answer 2

这种情况背后的主要原因是这个顺序：当您执行 Class A 时，它会自动导入 Class B 。在 Class B 中，您导入 Class A ，它会自动再次导入 Class B 。这个顺序一次又一次地发生，最终导致循环依赖。

第一个解决方案是创建另一个类并将所有依赖项导入其中。或者，如果您只想在两个类之间共享一些函数和变量，我建议您使用共享服务并在其中声明所有函数。然后，将服务导入您的组件或类中。