Проблема с navigateTo в модальном NativeScript Vue

Question

Я пытаюсь использовать navigateTo() в модальном режиме в моем приложении NativeScript Vue.

Мои модальные компоненты заключены в <Frame>, что, как я понимаю, позволяет ему быть контроллером навигации,Однако, когда я пытаюсь перейти к подкомпоненту модального окна, он фактически открывается за модальным в главном фрейме.

Вы можете увидеть это поведение здесь: https://play.nativescript.org/?template=play-vue&id=azowAE&v=3

Нажмитекнопку «Открыть модальные», а затем нажмите кнопку «Показать подстраницу».Казалось бы, ничего не происходит, но если вы затем нажмете кнопку «Закрыть», вы увидите подстраницу, открытую за модальным.

Answer 1

Другой причиной этой же проблемы является то, что подкомпонент, на который перемещается модал, не заключен в тег <Page>.

Когда вы добавляете уловку в код навигации, это даетследующие ошибки, в зависимости от того, используете ли вы ref или id.

this.$navigateTo(NewModal, {
  frame: "frame-id" // or "frame-ref"
}).catch(e => console.log(e));

"frame-ref" throws TypeError: Cannot read property 'id' of undefined

"frame-id" throws TypeError: backstackEntry.resolvedPage.onNavigatingTo is not a function

Answer 2

Чтобы перейти к фрейму, который используется в модальном режиме, вы должны использовать второй аргумент метода $ navigateTo. Это может ссылаться на кадр по ссылке или идентификатору. Самым простым способом, который я нашел, было присвоение фрейму в модале идентификатора:

<Frame id="modal-frame">...</Frame>

Затем вы можете перемещаться по модалу, как в примере

this.$navigateTo(OtherComponent, {frame: 'modal-frame'});

Обратите внимание, вы не ставите знак # перед идентификатором, как селектор CSS. Только значение идентификатора.

См. Кодовый номер: https://github.com/nativescript-vue/nativescript-vue/blob/master/platform/nativescript/plugins/navigator-plugin.js#L48