Как работает ионная история, а когда создается сток без root?
Я использую ionic v1.0.0 и не понимаю, как работает параллельная история, управляемая $ionicHistory
.
В частности, на устройствах Android при использовании кнопки "предыдущее оборудование" назад мое приложение Angular иногда ведет себя странно, и я хотел бы понять, почему. (например: navigating back открывает вид закрыт $ionicGoBack()
давно)
Для меня кажется, что некоторые из навигационных устройств ui-router создают новые стеки истории, а другие помещают элементы истории в корневую историю, даже если переход из состояния в суб-состояние должен присоединяться к истории, в которой записано состояние IMO.
Вопросы
- Кто-нибудь может объяснить, в каких случаях
ui-sref
или $state.go(...)
добавлять элементы истории во вновь созданный стек?
- Когда они добавляются к
root
?
- Модалы обрабатываются особым образом?
Извините за то, что вы не более конкретны, но приложение довольно сложно, и я не знаю, как изолировать проблемы в одном plunkr. Возможно, я пропустил кусок хорошей документации...
Ответы
Ответ 1
Я постараюсь ответить на этот вопрос, даже если вы не найдете всю информацию, которую вы спрашиваете.
Множество людей, включая меня, похоже, пытаются понять, как работает навигационная система и история.
Я уже ответил на вопрос , пытаясь объяснить, почему все работает не так, как ожидалось.
Кажется, что навигация отслеживает каждый просмотр, который посетил пользователь, используя коллекцию.
На самом деле в объекте $ionicHistory
есть 2 коллекции.
Первый $ionicHistory.viewHistory().views
, кажется, отслеживает каждое посещенное представление в текущем стеке, а другой $ionicHistory.viewHistory().histories
отслеживает все истории всего приложения.
У вас могут быть разные типы истории для вкладок, sidemenus или обычных просмотров.
Вы можете видеть, как работают параллельные независимые истории в codepen.
Там есть две разные истории. Один для домашней вкладки, а второй для вкладки about.
Перемещение по подпозициям на каждой вкладке и возврат к предыдущей вкладке вы заметите, что навигационная система помнит предыдущее состояние.
Я подготовил еще один plunker здесь, где вы можете увидеть, как работает навигация с некоторыми деталями, отображаемыми на странице.
Коллекция просмотров $ionicHistory.viewHistory().views
обновляется каждый раз, когда пользователь посещает новую страницу (текущий вид в коллекции заключен в квадратные скобки).
Если представление добавлено в коллекцию, оно не будет (оно не должно) быть добавлено снова.
Вы можете изменить поведение, очистив историю ($ionicHistory.clearHistory()
) или установив корень для текущей истории:
$ionicHistory.nextViewOptions({
historyRoot: true
});
На странице счета-фактуры моего плунжера есть зеленая кнопка (Other Root View). При нажатии я устанавливаю новый корень истории и меняю состояние:
$ionicHistory.nextViewOptions({
historyRoot: true
});
$state.go('otherviewroot');
Вещи работают так, как ожидалось, и на самом деле теперь у меня нет заднего вида, и мой стек содержит только текущее представление.
При попытке выполнить последовательность действий:
Home - Contacts - Invoices - Home (button in the header).
Теперь кажется, что Ionic потерял контроль над последовательностью и продолжает добавлять представления в коллекцию.
Нажатие кнопки "домой" должно очистить кнопку "Назад", так как мы находимся в корне для текущей истории, но этого не происходит.
Использование одного и того же шаблона снова и снова увеличивает размер коллекции неограниченно.
Я думаю, что это неправильное поведение, и требуется исправление.
Возвращаясь к вашему вопросу.
Задняя кнопка в Android работает... означает, что она следует за одним и тем же шаблоном.
Модификации, к счастью, не рассматриваются как обычные представления и не влияют на коллекцию.
Ответ 2
В качестве дополнительной информации к предыдущему сообщению.
История стека всегда связана с шаблоном "ion-nav-view". Таким образом, стек корневой истории создается для первого элемента "ion-nav-view".
Если вы планируете использовать разные стеки истории, я бы посоветовал всегда ссылаться на ion-nav-view на имя вида:
<ion-nav-view name="default"></ion-nav-view>
вместо <ion-nav-view></ion-nav-view>
В этом CodePen у вас есть RootStack для страниц вкладок и других страниц (с именами "вкладки", "другие", other1 "), а затем на страницах вкладок у вас есть один подкомпонент для каждой вкладки.
Страницы вкладок и другие страницы выполняются внутри Root ion-nav-view. Во время моих тестов мне нужно было назначить имя для root-ion-nav-view, а затем ссылаться на это имя вида в контроллере. В противном случае стек всегда воссоздавался при переключении между основными страницами (Other = > Tabs = > Other = > ..)
Html для корневого стека:
<ion-nav-view name="default"></ion-nav-view>
Контроллер:
.state('other', {
url: "/other",
views: {
'default': {
templateUrl: "templates/other.html",
}
},
.state('tabs', {
url: "/tab",
abstract: true,
views: {
'default': {
templateUrl: "templates/tabs.html",
}
}
})
Внутри шаблона табуляции я назначил новое представление ion-nav для разных вкладок (как это делается в шаблоне ионных вкладок по умолчанию)
Например, для домашней вкладки (и домашнего стека) Html выглядит так (страницы домой, факты):
<ion-nav-view name="home-tab"></ion-nav-view>
Контроллер:
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "templates/home.html",
},
}
})
.state('tabs.facts', {
url: "/facts",
views: {
'home-tab': {
templateUrl: "templates/facts.html",
},
}
})
Я также отправил отчет об ошибке для кодефа выше. Это неверное переключение между историями.
https://github.com/driftyco/ionic/issues/4086
Я не уверен в своих исправлениях.
Возможно, функция истории должна быть переработана более глобально для решения проблем.