angular - ionic 应用程序中的循环依赖

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，它将参数作为字符串并分派(dispatch)正确的页面，但它看起来像一个丑陋的技巧，并且 Ionic 已经定义了提供程序 ModalController。

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

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

提前致谢

Answer 1

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

1- 组件/页面仅处理显示内容

2- 提供商/服务负责获取数据，或仅做一些艰苦的工作

3-切勿将A导入B，然后将B导入A。如果你发现自己这样做，很可能你还没有好好考虑一下。使用 1、2 规则重试

为了解决您的第一个问题，我将从提供程序中删除呈现模式的逻辑，并将其放置在我正在处理的页面上(如果它非常特定于该页面)，或者将该逻辑放置在应用程序中.component.ts(如果此模式可以在不同情况下呈现，例如警告/错误/信息消息)

现在您的提供商可能仍然需要通过模式提供一些信息，对吧？那么我们该怎么做呢？ 一种方法是创建一个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);
}

现在，在注入(inject) FooProvider 的页面中，您可以订阅该可观察主题，并使用它提供给您的数据来呈现您的模态:

在 mypage.ts 或 app.component.ts 中

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

瞧!

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

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