Question

我目前正在处理ionic4中的应用程序，我有一个餐厅详细信息页面，可以通过两种方式访问该页面。 1单击主页上的饭店卡，第二单击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.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 {}

Answer 1

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

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

UIImageView

可以从app.component中调用@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()

Answer 2

即使您来自外部URL，此解决方案也适用于Angular。

window.history.back()

如何创建动态后退按钮？

2 个答案: