离子应用程序中的循环依赖

Question

我有一个 Ionic 3 应用程序，我需要升级到 Ionic 4。在这次迁移中，一些循环依赖性成为问题，我想知道解决它们的最佳方法是什么。

我设法解决了所有其他问题，但我遇到了这两个问题：

一个页面调用一个提供者，在提供者中我有一个函数显示一个模式，这个页面作为一个组件

=> FooProvider 导入 myPage 和 myPage 导入 FooProvider

FooProvider

import { myPage} from '../../pages/mypage/mypage';
this.modalCtrl.create({
          component: myPage
});

我的页面

import { FooProvider } ...;
...
constructor(public provider: FooProvider ...) {

我可以创建一个 modalProvider，它将参数作为字符串并分派正确的页面，但它看起来像一个丑陋的技巧，并且提供者 ModalController 已经由 Ionic 定义。

--编辑将其他循环依赖移动到另一个问题

关于避免这种循环依赖的最佳实践有什么想法吗？

提前致谢

Answer 1

一个有用的经验法则是关注点分离。

1- A component/Page 仅处理显示内容

2- A provider/service 处理获取数据，或者只做一些艰苦的工作

3- 永远不要在 B 中导入 A 然后在 [=36= 中导入 B ]A。如果您发现自己这样做，很可能是您没有好好考虑一下。使用 1、2 条规则重试

为了解决您的第一个问题，我将从提供者那里删除呈现模态的逻辑，并将其放置在我正在处理的页面上（如果它非常特定于该页面），或者将该逻辑放入app.component.ts（如果此模态可以在不同情况下显示，例如 warning/error/info 消息）

现在您的提供商可能仍需要通过模态显示一些信息，对吗？那我们该怎么做呢？一种方法是创建一个 modalSubject: Subject

FooProvider

import { ParametreModel } from './../../models/parametre.model';
export class ConnectionServerProvider {
    public parametre: ParametreModel;
    public modalSubject: Subject<ParametreModel> = new Subject<ParametreModel>();
    // ...

    // Then something happens and you need that parameter to sent to the model
    this.parametre = someDataFromSomeWhere;
    this.modalSubject.next(this.parametre);
}

现在，在注入 FooProvider 的页面中，您可以订阅该可观察主题，并使用它提供给您的数据展示您的模式：

在mypage.ts或app.component.ts

constructor(private foo: FooProvider) {}
ngOnInit() {
   this.foo.modal.modalSubject.subscribe(
     (param: ParametreModel) => {
          if(!param) {
             yourFunctionThatPresentsTheModalWithParam(param);
          }
     }
   )
}

瞧！

确保您在 ngOnDestroy 取消订阅该主题。

你能否为你的第二个问题创建另一个问题，以便遇到相同问题的人可以找到它？

离子应用程序中的循环依赖

Circular dependencies in ionic application

circular-dependency

ionic-framework

angular