Как создать динамическую кнопку возврата? - PullRequest
Новая
       42

Как создать динамическую кнопку возврата?

0 голосов
/ 04 марта 2019

В настоящее время я работаю над приложением в ionic4, у меня есть страница с описанием ресторана, в которую можно попасть двумя способами.1, нажав на карточку ресторана на домашней странице, а 2 - на маркер карты Google.

Итак, как вы догадались, в первом случае я хотел бы вернуться на домашнюю страницу, а во втором - я.хочу вернуться к моей карте.

это мой map.component.html: 

<div *ngIf="markerClicked" class="restaurant-info-overlay">
    <mm-list-card [restaurant]="restaurant"></mm-list-card>

    <ion-row class="s-margin-b">
        <ion-col class="s-padding-r" size="6" no-padding>
            <mm-navigation-button [destination]="[51.568928, 4.618768]" 
                [shape]="'round'" [color]="'white'" [expand]="'full'" 
                [icon]="true"></mm-navigation-button>
        </ion-col>
        <ion-col class="s-padding-l" size="6" no-padding>
            <ion-button shape="round" color="primary" expand="full"
                [routerLink]="'/restaurant/' + restaurant._id"  routerDirection="forward" detail="true">
                book table
            </ion-button>
        </ion-col>
    </ion-row>
</div>

<!--create a element for map. #Map - identifier -->
<div #Map class="map"></div>

и это routerLink в слайд-card.component 

    [routerLink]="'/restaurant/' + restaurant.Restaurant._id" routerDirection="forward" detail="true">

Что я мог сделать, чтобы добиться динамичной кнопки возврата.У меня была мысль установить parentView и сделать что-то вроде этого: 

<ion-buttons slot="start">
    {{ parentView }}
  <ion-back-button [attr.defaultHref]="parentView === 'home' ? '/' : '/test'"></ion-back-button>
</ion-buttons>

Может ли кто-нибудь помочь мне в этом?

app-routing.module.ts: 

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'login', loadChildren: './pages/login/login.module#LoginPageModule' },
  { path: '', loadChildren: './pages/tabs/tabs.module#TabsPageModule' },
  { path: 'restaurant/:id', loadChildren: './pages/detail/detail.module#DetailPageModule' },
  { path: 'aanbiedingen', loadChildren: './pages/offers/offers.module#OffersPageModule' },
  { path: 'saved', loadChildren: './pages/saved/saved.module#SavedPageModule' }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

и tab.routing.module.ts: 

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        children: [{ path: '', loadChildren: '../home/home.module#HomePageModule' }]
      },
      {
        path: 'reserveringen',
        children: [{ path: '', loadChildren: '../reservations/reservations.module#ReservationPageModule' }]
      },
      {
        path: 'zoeken',
        children: [
          { path: 'type/:id', loadChildren: '../search/search.module#SearchPageModule' },
        ]
      },
      {
        path: 'opgeslagen',
        children: [{ path: '', loadChildren: '../saved/saved.module#SavedPageModule' }]
      },
      {
        path: '',
        redirectTo: '/tabs/home',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/home',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

1 Ответ

0 голосов
/ 06 июня 2019

Немного поздно, но я внедрил сервис, который решает ту же проблему на моей стороне, и это может быть удобно для других людей.Идея пришла из этого сообщения в блоге

Сервис позволяет сохранять записи истории навигации маршрутизатора и, пропустив последние 2 значения, мы можем получить последний пройденный маршрут. 

@Injectable({
  providedIn: 'root'
})
export class RoutingState {
  private history: string[] = [];

  constructor(private router: Router) {}

  public loadRouting(): void {
    this.router.events
      .pipe(
          filter(event => event instanceof NavigationEnd)
        )
      .subscribe(({urlAfterRedirects}: NavigationEnd) => {
          this.history = [...this.history, urlAfterRedirects];
      },
      error => { throw new Error(error); }
      );
  }    

  /**
   * Gives the previous URL from the navigation history.
   */
  public getPreviousUrl(): string {
    return this.history[this.history.length - 2];
  }
}

Метод loadRouting() можно вызвать из app.component: 

export class AppComponent {
  constructor(routingState: RoutingState) {
    routingState.loadRouting();
  }
}
...