时间戳

首页 > 解决方案 > 如何在Angular7的不同选项卡中导航回上一个路线/页面？

angular - 如何在Angular7的不同选项卡中导航回上一个路线/页面？

问题描述

我的 angular7 应用程序中有多个选项卡。我需要从一页导航回不同的页面。

场景：我在 Tab1 有一个搜索页面，一旦我们使用任何搜索字符串搜索得到搜索结果，现在如果我单击结果列表中的任何一条记录，我会将用户带到不同选项卡中的不同页面（page2）（表 2)。现在面临的挑战是导航回上一页，我必须保留该页面上的原始用户搜索结果。

Tab A --> page1 --> page 1上的链接按钮重定向到page2 --> 如果我点击page2上的后退按钮（锚标记），我需要返回上一个路线（page1）并且应该保留搜索结果.

请让我知道你的意见..

标签： angularangular7

解决方案

如果我想象的完美，有一个解决方案是您的选项卡机制不适合这个问题。

不要使用两个不同的 HTML 组件，而是使用一个组件并让用户在选项卡之间导航，而不是在页面之间导航。

我用 Angular Material 解决了这个问题<mat-table>。

在.ts文件中：

import {Component} from '@angular/core';

@Component({
  selector: 'tab-group-basic-example',
  templateUrl: 'tab-group-basic-example.html',
  styleUrls: ['tab-group-basic-example.css'],
})
export class MyComponent {
// activate or deactivate tabs..
}

在HTML：

<mat-tab-group>
    <mat-tab label="First">

        <!-- My search and result page html here -->

    </mat-tab>

    <mat-tab label="Second">
        <!-- My second page content here -->
    </mat-tab>

 </mat-tab-group>

如需更多研究，请单击 Angular Material 文档

推荐阅读