TypeScript 循环依赖

Question

我有 2 个类、Class A 和 ClassB。 Class B 扩展了 Class A 以便我可以访问 Class A 的实例和服务。 Class B 有一些我将在 Class 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

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

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

Answer 2

如果您想从父 class 调用子 class 方法，请使用 @ViewChild 装饰器。

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

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

另请参阅此

TypeScript 循环依赖

TypeScript Circular Dependency

extends

typescript

angular