Ionic 4: Как установить направление навигации (назад / вперед) с помощью routerLink?

Ionic 4 теперь использует роутер Angular. Хотя у него все еще есть собственный NavControler, который помогает имитировать стиль навигации push / pop с помощью методов navigateBackward и navigateForward.

Чтобы показать кнопку ion-back, я думаю, что необходимо использовать navigateForward и navigateBackward.

В моем приложении я предпочитаю использовать routerLinks для навигации (чтобы пользователь мог открывать страницу в другой вкладке) вместо navController.

Но с routerLinks кнопка ion-back не появляется. Должен быть способ заставить routerLinks действовать как push / pop навигация.

Как я могу смоделировать такое событие, как navigateForward и navigateBackward, с помощью routerLinks?


ionic4 angular7 angular-ui-router routerlink direction
person Natanael    schedule 03.01.2019    source источник

Ответы (2)


arrow_upward
20
arrow_downward

Вы можете использовать атрибут routerDirection в своем элементе представления. Например

  <ion-button [routerLink]="['/details']" routerDirection="forward" >
    Go forward
  </ion-button>

Для полного подробного описания того, как управлять навигацией в Ionic 4, включая routerLink, вы должны прочитать Очень подробное сообщение в блоге Джоша

person welshcathy    schedule 20.02.2019
comment
Пожалуйста, также сообщите значение routerDirection для обратной анимации. - person Syed Kashan Ali; 25.02.2019
comment
Для получения более подробной информации снова Джош здесь для вас! joshmorony.com / - person welshcathy; 06.03.2019
comment
Это routerDirection="back" не назад, к сведению. - person Grant; 25.09.2019
comment
Как это сделать прямо в машинописном тексте? - person Otziii; 05.01.2020

arrow_upward
1
arrow_downward

Переход от Ionic 3 к Ionic 4 с навигацией немного изменился, но изменения не так уж и плохи. Ionic Docs рекомендуют переключиться на Angular Routing вместо традиционного Ionic pop and push. Есть несколько способов перенаправить ваши страницы, но я думаю, что самый простой для понимания - использовать функции navigateForward() и navigateBack() в файле .ts.

Ex.

navigateForward(){
    this.navCtrl.navigateForward('/route of the page you want to navigate to');
  }
<ion-button large block (click)="navigateForward()">
      Navigate Forward
</ion-button>

Конечно, перемещение вперед и назад связано со структурой построения вашего приложения из стека.

Файл app-routing.module.ts автоматически создаст маршруты для ваших сгенерированных страниц, но вы можете вручную изменить там маршруты, а также установить корневую страницу.

Хорошая ссылка на руководства по маршрутизации, здесь. Также показаны различные способы навигации с использованием маршрутов в вашем приложении.

person Stephen Romero    schedule 04.02.2019
comment
Ionic рекомендует больше не использовать NavController. Как это можно сделать только с помощью роутера? - person Otziii; 05.01.2020
comment
@Otziii похоже, что теперь Ionic решила полностью использовать угловую маршрутизацию. их документация здесь: ionicframework.com/docs/angular/navigation может помочь, а если не поискать Угловая маршрутизация в помощь. - person Stephen Romero; 06.01.2020
comment
@Otziii Вы нашли какое-нибудь решение, чтобы сделать это с помощью роутера? StephenRomero Бро, я не нашел ни одного маршрутизатора в загруженной вами ссылке - person Nischaya Sharma; 07.06.2021
comment
@NischayaSharma Простите, не помню. - person Otziii; 07.06.2021
comment
@NischayaSharma Теперь вы должны использовать 100% -ную маршрутизацию Angular. Однако это должно быть возможно с Angular. - person Stephen Romero; 07.06.2021
comment
@StephenRomero Я пробовал использовать угловую маршрутизацию, но до сих пор не могу использовать какую-либо функцию, например направление маршрутизатора, поскольку использование Nav Ctrl не рекомендуется. Так что все мои страницы продвигаются только по умолчанию. - person Nischaya Sharma; 10.06.2021