离子应用中的循环依赖性

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定义。

--EDIT将其他循环依赖项移至另一个问题

关于避免这种循环依赖的最佳实践的任何想法？

谢谢你提前

Answer 1

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

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

2-提供者/服务处理获取数据，或仅做一些艰苦的工作

3-永远不要在B中输入A然后在A中输入B.如果你发现自己这样做了，那么你有可能没有好好想一想。再次尝试使用1,2规则

为了解决你的第一个问题，我将删除从提供者呈现模态的逻辑，并将其放在我正在处理的页面上（如果它非常特定于该页面），或者将该逻辑放在app.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);
}

现在在你的Page中注入了FooProvider，你可以订阅那个可观察的主题，并为你的模态提供它给你的数据：

在mypage.ts或app.component.ts中

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

瞧！

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

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