Круговые зависимости в ионном приложении
У меня было приложение Ionic 3, которое мне нужно было обновить до Ionic 4. В этой миграции некоторые круговые зависимости стали проблематичными, и мне интересно, как лучше всего их решить.
Мне удается решить все остальные, но у меня есть проблемы с этими двумя:
- Страница вызывает провайдера, а в провайдере у меня есть функция, которая отображает модал с этой страницей как компонент
=> FooProvider импортирует myPage, а myPage импортирует FooProvider
ФуПровидер
import { myPage} from '../../pages/mypage/mypage';
this.modalCtrl.create({
component: myPage
});
моя страница
import { FooProvider } ...;
...
constructor(public provider: FooProvider ...) {
Я мог бы создать modalProvider, который принимает аргумент в виде строки и отправляет нужную страницу, но это выглядит как безобразный трюк, а ModalController провайдера уже определен Ionic.
--EDIT Переместил другую циклическую зависимость в другой вопрос
Любая идея о лучших методах, чтобы избежать таких циклических зависимостей?
заранее спасибо
Ответы 1
Полезным эмпирическим правилом является разделение интересов.
1- Компонент/страница имеет дело только с отображением материала
2- Поставщик/услуга занимается получением данных или выполняет только тяжелую работу
3- Никогда не импортируйте А в Б, а затем Б в А. Если вы обнаружите, что делаете это, скорее всего, вы не подумали об этом. Попробуйте еще раз, используя 1, 2 правила
Чтобы решить вашу первую проблему, я бы удалил логику представления модального окна из поставщика и поместил его либо на страницу, над которой я работаю (если это очень специфично для этой страницы), либо поместил эту логику в app.component. ts (если это модальное окно может быть представлено в различных ситуациях, таких как предупреждение/ошибка/информационное сообщение)
Теперь вашему провайдеру все еще может понадобиться предоставить какую-то информацию через модальное право? Итак, как мы это делаем? Одним из способов может быть создание modalSubject: Тема
ФуПровидер
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.
Можете ли вы создать еще один вопрос для своего второго вопроса, чтобы люди, имеющие ту же проблему, могли его найти?
большое спасибо ! Я не хотел помещать функцию создания мода на страницу, потому что она не специфична для этой страницы, но я не думал, что смогу разместить эту функцию в компонентах. Но в компонентах я отображаю эту страницу (в первых строках, где я отображаю «страницу входа в приложение». Будет ли это также вызывать циклическую зависимость? Я создам еще один вопрос для другой циклической зависимости с serverprovider
Я не понял, что вы имеете в виду под [в первых строках, где я отображаю «входную страницу приложения»]. Как я уже упоминал, если модальное окно не относится к этой странице, то лучше отображать его из app.component.ts, подписавшись на этот наблюдаемый modalSubject, который я добавил в ваш FooProvider.
о, хорошо, я не понял, спасибо, мне придется импортировать компонент приложения на мою страницу, чтобы вызвать функцию. Большое спасибо !
Нет, вы, конечно, не должны этого делать!! app.component всегда жив в вашем приложении, в отличие от всех других страниц, которые приходят и уходят. Поэтому имеет смысл делегировать ему некоторые общие модальные окна. Никогда не важно, чтобы компонент в другом компоненте отображал модальное окно. вместо этого используйте ленивую загрузку, передав имя страницы (строку) вашему модальному контроллеру.
Я сделал небольшую редакцию, чтобы быстро возобновить циклическую зависимость. Быстро, в первом случае FooProvider импортирует myPage, а myPage импортирует FooProvider, а во втором случае ServerProvider импортирует ParametreModel, а ParametreModel импортирует ServerProvider.