角: ReferenceError:在初始化+循环依赖警告之前无法访问“FixedDeposit”

Question

以下是我所提出的问题，以求解决：

角: 7.2.1 ES6类ReferenceError :无法在初始化前访问“X”

首先，我在VS代码终端上得到以下警告：

检测到循环依赖项中的警告: src\app\modules\asset-classes\fixed-income\fixed-deposits\components\fixed-deposits-details\fixed-deposits-details.component.ts -> src\app\modules\asset-classes\fixed-income\fixed-deposits\components\fixed-deposits-form\fixed-deposits-form.component.ts -> src\app\modules\asset-classes\fixed-income\fixed-deposits\components\fixed-deposits-details\fixed-deposits-details.component.ts 检测到循环依赖项中的警告: src\app\modules\asset-classes\fixed-income\fixed-deposits\components\fixed-deposits-form\fixed-deposits-form.component.ts -> src\app\modules\asset-classes\fixed-income\fixed-deposits\components\fixed-deposits-details\fixed-deposits-details.component.ts -> src\app\modules\asset-classes\fixed-income\fixed-deposits\components\fixed-deposits-form\fixed-deposits-form.component.ts 检测到循环依赖项中的警告: src\app\modules\shared\components\common-dialog\common-dialog.component.ts -> src\app\view-manager.service.ts -> -> 检测到循环依赖项中的警告: src\app\view-manager.service.ts -> src\app\view-manager.service.ts

现在，这显然是因为下面的代码在我各自的组件中：

fixed-deposits-form.component.ts

在保存中单击>>

this.viewService.loadSideNavWithCallback(
    FixedDepositsDetailsComponent,
    (compRef: ComponentRef<any>) => {
    compRef.instance.fixedDeposit = fixedDepositEntity;
});

fixed-deposits-details.component.ts

编辑单击>>

this.viewService.loadSideNavWithCallback(
  FixedDepositsFormComponent,
  (compRef: ComponentRef<any>) => {
    compRef.instance.fixedDeposit = this.fixedDeposit;
  });

viewService基本上是我的ViewManagerService，它可以帮助实现角度组件之间的松散耦合，还可以用于视图导航。由于FixedDepositsFormsComponent & FixedDepositsDetailsComponent在侧导航中打开(它存在于AppComponent上)，ViewManagerService将完成加载这些组件的工作。

虽然很明显，我有一个循环依赖项，但我不知道如何修复它。

此外，我还在浏览器控制台中得到以下错误：

Uncaught :无法在ReferenceError的Module.FixedDeposit (main.js:4274)初始化之前访问“FixedDeposit”(定期存款-细节)。

现在，第21行简单地指向details组件上的my @ Now属性：

export class FixedDepositsDetailsComponent implements OnInit {

  @Input() fixedDeposit: FixedDeposit;

如果我从我的loadSideNavWithCallback中删除了loadSideNavWithCallback代码(在保存单击时调用)，就没有错误。但是我不能取消它，因为我需要有这个代码来加载细节组件。

感谢事先提供的帮助。

Answer 1

循环依赖是不好的，因为它使得webpack无法按依赖顺序初始化模块。通常webpack确保当模块的导出被导入到其他地方时，导出模块在导入模块之前执行，从而确保在将所有值导入到其他地方之前定义和初始化所有值。

但是，如果存在循环依赖项，则不存在这样的初始化顺序，这使得在定义值之前导入值(即undefined )成为可能。因为这是令人惊讶的，而且很难调试，因此，如果检测到循环依赖项，喷出就会发出警告。它确实做到了，因为它暗示了您的FixedDeposit在初始化之前是如何使用的。

因此，注意CLI的警告并避免在代码中创建循环依赖关系是一个好主意。

viewService基本上是我的ViewManagerService，它可以帮助实现角组件之间的松散耦合，也可以用于视图导航。

正如我们所看到的，您的“松散”耦合仍然太紧。此外，使用有状态服务进行导航绕过了角度路由器，使用户无法对单个视图进行书签，并导致开发过程中的活动重新加载回到另一个视图。

由于所有这些原因，导航应该使用角度路由器而不是有状态服务来执行。然后，组件可以导航到不同的视图，而不知道负责此视图的组件，因此也不需要在组件类之间创建循环依赖关系。关于如何配置和使用角路由器的更多信息，请参阅在官方的角度教程中。

Answer 2

为了避免循环依赖，我通常将操作代码(编辑/保存等)移动到公共服务中，并严格保留组件以在html中显示元素。即将loadSideNavWithCallback从FixedDepositsFormComponent移动到公共服务。

对我来说，一个很好的经验法则是避免将组件导入到另一个组件/服务中，而是使用服务。