0

我已经通过以下 SO Question 寻求解决方案：

Angular：7.2.1 ES6 类 ReferenceError：初始化前无法访问“X”

首先，我在 VS Code 终端上收到以下警告：

检测到循环依赖项中的警告：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\固定存款细节\固定存款细节.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-reposits\components\fixed-deposits-details\fixed-deposits-details.component.ts -> src\app\modules\asset-classes\fixed-income\fixed-deposits\components\固定存款形式\固定存款形式.component.ts

检测到循环依赖项中的警告：src\app\modules\shared\components\common-dialog\common-dialog.component.ts -> src\app\view-manager.service.ts -> src\app\modules\shared\ components\common-dialog\common-dialog.component.ts

检测到循环依赖中的警告：src\app\view-manager.service.ts -> src\app\modules\shared\components\common-dialog\common-dialog.component.ts -> src\app\view-manager。服务.ts

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

固定存款-form.component.ts

在保存点击>>

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

固定存款详细信息.component.ts

在编辑点击>>

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

viewService 基本上是我的 ViewManagerService ，它有助于实现角度组件之间的松散耦合，也用于视图导航。由于 FixedDepositsFormsComponent 和 FixedDepositsDetailsComponent 在侧导航中打开（存在于 AppComponent 上），因此 ViewManagerService 负责加载这些组件。

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

此外，我的浏览器控制台中出现以下错误：

未捕获的 ReferenceError：在 Module../src/app/modules/asset-classes/fixed-income/fixed-deposits/components/fixed-deposits-的 Module.FixedDeposit (main.js:4274) 初始化之前无法访问“FixedDeposit”细节/固定存款细节.component.ts（固定存款细节.component.ts:21）

现在第 21 行只是指向我在 details 组件上的 @Input 属性：

export class FixedDepositsDetailsComponent implements OnInit {

  @Input() fixedDeposit: FixedDeposit;

如果我从我的 FixedDepositsFormComponent 中删除 loadSideNavWithCallback 代码（在保存单击时调用），则没有错误。但我不能取消它，因为我需要该代码来加载详细信息组件。

提前感谢任何帮助。

4

2 回答 2

1

循环依赖很糟糕，因为它使 webpack 无法按依赖顺序初始化模块。通常，webpack 确保每当一个模块的导出被导入到别处时，导出模块在导入之前执行，从而确保所有值在它们被导入到别处之前被定义和初始化。

但是，如果存在循环依赖关系，则不存在这样的初始化顺序，从而可能在定义之前导入值，从而导致导入返回undefined。因为这令人惊讶并且难以调试，所以如果检测到循环依赖，Angular CLI会发出警告。它做得很好，因为它暗示了你FixedDeposit在初始化之前是如何被使用的。

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

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

正如我们所看到的，您的“松散”耦合仍然太紧。此外，使用有状态服务进行导航绕过了角度路由器，使用户无法为单个视图添加书签，并导致开发期间的实时重新加载回退到不同的视图。

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

于 2021-01-02T21:54:45.473 回答
0

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

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

于 2021-01-02T20:29:23.903 回答