使用模态实用程序类避免循环依赖？

Question

我有一个 utilities 类来处理整个应用程序中的常见事情，例如显示警报、加载微调器和模式。现在在我的主页上，我正在尝试调用utilities.openModal()，但我收到了带有以下警告消息的循环依赖：

[ng] 检测到循环依赖中的警告：

[ng] src/app/pages/users/add-entry/add-entry.page.ts -> src/app/services/utilities/utilities.service.ts -> src/app/pages/users/ add-entry/add-entry.page.ts

[ng] 检测到循环依赖中的警告：

[ng] src/app/services/utilities/utilities.service.ts -> src/app/pages/users/add-entry/add-entry.page.ts -> src/app/services/utilities/实用程序.service.ts

utilities.service.ts 上的 openModal 函数：

openModal(page, enterAnimation = null, leaveAnimation = null) {
  // Create modal
  this.modalCtrl.create({
    component: page,
    enterAnimation: enterAnimation,
    leaveAnimation: leaveAnimation,
    componentProps: {
      utilities: UtilitiesService
    }
  }).then(m => m.present());
}

openEntryModal() {
  this.openModal(AddEntryPage);
}

我只是在我的主页组件上用this.utilities.openEntryModal() 调用它，一旦模式打开它就会引发循环依赖警告。任何想法为什么会发生这种情况？我有一个粗略的想法，但无法确定。

add-entry.page.ts 导入：

import { Component } from '@angular/core';
import { UtilitiesService } from 'src/app/services/utilities/utilities.service';

utilities.service.ts 导入：

import { Injectable } from '@angular/core';
import { ModalController, LoadingController } from '@ionic/angular';
import { AnimationsService } from 'src/app/services/animations/animations.service';
import { AddEntryPage } from 'src/app/pages/users/add-entry/add-entry.page';

Answer 1

这意味着你在utilities.service.ts 中导入了AddEntryPage，在add-entry.page.ts 中你导入了UtilitiesService，这将导致循环依赖

根据您的代码，您似乎想从 AddEntryPage（您导入了服务）打开 AddEntryPage 组件的模式

如果您为其他功能导入服务，最好分解该服务，例如创建另一个名为modalService 的服务