Как вернуться к предыдущему маршруту / странице на другой вкладке в Angular7?

Question

У меня есть несколько вкладок в моем приложении angular7. И мне нужно перейти обратно с одной страницы на другую.

Сценарий: у меня есть страница поиска в Tab1, как только мы выполняем поиск по любой строке поиска, получим результаты поиска, теперь, если я нажму на любую из записей из Из списка результатов я беру пользователя на другую страницу (страница 2), которая находится на другой вкладке (вкладка 2). Теперь перед нами стоит задача вернуться на предыдущую страницу, и мне нужно сохранить исходные результаты поиска пользователей на этой странице.

Вкладка A -> страница1 -> кнопка ссылки на странице 1 перенаправляет на страницу 2 -> Если я нажимаю кнопку «Назад» (тег привязки) на странице 2, мне нужно go вернуться к предыдущему маршруту (страница 1), и результаты поиска должны быть сохранены.

Пожалуйста, дайте мне знать ваши входные данные ..

Answer 1

Если я прекрасно представляю, есть решение, что ваш механизм вкладок не подходит для этой проблемы.

Вместо использования двух разных компонентов HTML, используйте один компонент и позволяйте пользователям перемещаться между вкладками, не страницы.

Я решаю эту проблему с помощью Angular материала <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 Документация по материалам