angular - 复杂的 TypeScript 循环依赖问题

Question

我的 Angular 应用程序的数据模型中有一个非常复杂的依赖结构。

在抽象形式中，它看起来像这样(A -> B 表示“A 导入 B”):



从这个结构中我得到了很多循环依赖，我很难解决这个问题。我已经尝试应用提到的解决方案 here : 我尝试使用 internal.ts文件并导出该文件中的所有类。导入任何类时，我从 ./internal.ts 导入它们。再次归档。

尽管如此，问题仍然存在。唯一改变的是错误消息的形式:

从

Circular dependency detected: C.ts -> D.ts -> E.ts -> C.ts

到

Circular dependency detected: C.ts -> internal.ts -> C.ts
Circular dependency detected: D.ts -> internal.ts -> D.ts
Circular dependency detected: E.ts -> internal.ts -> E.ts

有没有其他方法可以解决这样的问题？

Answer 1

linked article 中提出的解决方案并没有消除循环依赖——它只是通过仔细控制加载顺序来避免它们可能造成的任何灾难性影响。去引用:

The reason that this solves our problem is: we now have full control over the module loading order. Whatever the import order in internal.js is, will be our module loading order.

循环依赖只是有问题的，因此模块加载顺序只有在您有模块在加载时立即评估其导入时才真正重要 - 即在模块的主体中​​使用导入的值:

// Foo.js
import { Bar } from "./Bar"

export class Foo {
  getBarClass() {
    return Bar;
  }
}


// Bar.js
import { Foo } from "./Foo"

console.log(Foo.name);           // Foo eval'ed on load :(
export const fooClass = Foo;     // Foo eval'ed on load :(

export class Bar extends Foo {   // Foo eval'ed on load :(
  static fooClass = Foo;         // Foo eval'ed on load :(
  fooClass = Foo;                // Eval'ed only on new Bar()

  static getFooClass() {        
    return Foo;                  // Eval'ed only on Bar.getFooClass()
  }

  getFooClass() {                
    return Foo;                  // Eval'ed only on someBar.getFooClass()
  }
}

在这个例子中 Foo.js 不访问 Bar在加载时，仅在稍后 getBarClass叫做。另一方面，Bar.js 确实访问了导入的 Foo在加载时多次。因此，必须先加载 Bar.js。

一旦您不再在加载时立即访问导入，循环依赖就不再是问题:

// execute in next tick
setImmediate(() => console.log(Foo.name));

// wrap in function
export const getFooClass = () => Foo;

// wrap in function
export const getBarClass = () => {
  return class Bar extends Foo {
    static fooClass = Foo;
    fooClass = Foo;
  };
};

当然，这些延迟评估的解决方案看起来相当难看，所以最后你可能想要使用仔细协调的加载顺序。