如何创建动态后退按钮？答案

【问题标题】：How to create a dynamic back button?如何创建动态后退按钮？
【发布时间】：2019-07-26 05:33:47
【问题描述】：

我目前正在 ionic4 中开发一个应用程序，我有一个可以通过两种方式访问的餐厅详细信息页面。 1 通过单击主页中的餐厅卡，第 2 次单击谷歌地图标记。

所以你猜在第一种情况下我想返回主页，在第二种情况下我想返回我的地图。

这是我的 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>

这是 slide-card.component 中的 routerLink

    [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 {}

【问题讨论】：

标签： ionic-framework angular6 angular7 ionic4

【解决方案1】：

这个解决方案在 Angular 中对我有用，即使您来自外部 URL。

window.history.back()

【讨论】：

【解决方案2】：

有点晚了，但我实现了一项服务，解决了我这边的同样问题，它可能对其他人也很方便。这个想法来自这个blog post

该服务允许保存路由器导航历史条目，通过跳过最后两个值，我们可以获得最新的导航路线。

@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];
  }
}

可以从app.component调用loadRouting()方法：

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

【讨论】：