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

Question

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

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

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

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

Как можно имитировать такие события, как navigateForward и navigateBackward, используя routerLinks?

Answer 1

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

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

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

Answer 2

Переход с Ionic 3 на Ionic 4 с навигацией немного изменился, но изменения не так уж и плохи. В Ionic Docs рекомендуется переключаться на угловую маршрутизацию вместо традиционного Ionic Pop и 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 Файл автоматически создаст маршруты для ваших сгенерированных страниц, но вы можете вручную изменить маршруты и установить корневую страницу.

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

Answer 3

использоватьrouterDirection="back"это изменит переход страницы, как возвращение с вашимrouterLink

#переход #ионный