Как вызвать кнопку возврата браузера в Angular Project - PullRequest
Новая
       25

Как вызвать кнопку возврата браузера в Angular Project

0 голосов
/ 17 февраля 2020

В моем проекте Angular 8 у меня есть целевая страница (template-table.component), которая показывает список элементов, которые можно отфильтровать и отсортировать. Фильтр и сортировка добавляются в маршрут queryParams (например: "/ template-table? Name = another & type = Type% 201"). Если вы выберете элемент в списке, вы попадете на другой маршрут (с template-details.component), в котором есть более подробная информация об этом элементе. На этой странице сведений будет кнопка «Вернуться к списку», которая должна вернуть пользователя на его предыдущую страницу списка.

Поскольку я хочу, чтобы пользователь вернулся к списку с параметрами фильтра, которые они ранее использовали Я не могу просто go указать маршрут этого компонента, вместо этого я хочу go вернуться в историю (например, как работает кнопка возврата браузера). Итак, как мне установить элемент для ссылки на то, на что будет ссылаться кнопка возврата в браузере?

Итак, это самый минимум моего template-detail.component.html: 

<h1>template-details works!</h1>
<div>{{template}}</div>
<div>{{id}}</div>
<div><a routerLink="/template-table/">Return to list page</a></div>

Я думаю, что я также хотел бы проверить маршрут, чтобы увидеть, является ли это маршрут компонента template-table с параметрами запроса, а не несвязанный маршрут. (Таким образом, маршрут должен быть таким: "/ template-table? Params = xxx" и не может быть "google.com". Если кнопка возврата браузера не связана с таблицей шаблонов, то она должен go в "/ template-table" без каких-либо параметров (или, может быть, моей страницы 404).

Базовая функциональность c, которую я хочу достичь, заключается в том, чтобы пользователь мог возможность отфильтровать список, go по другому маршруту с более подробной информацией об элементе списка, а затем вернуться к списку с теми же фильтрами, которые они добавили ранее. Если есть лучший способ сделать это, чем пытаться чтобы получить доступ к кнопке «Назад» браузера, я бы хотел услышать об этом.

Спасибо за любую помощь, которую вы можете оказать.

Ответы [ 2 ]

2 голосов
/ 17 февраля 2020

Предложение Артурофоса использовать службу определения местоположения представляется уместным, поскольку его можно использовать для перехода к виду, в котором вы находились до маршрутизации на новый компонент.

Конечно, хотя есть очень Javacsripty-способы делать такие вещи, всегда рекомендуется использовать библиотеки Angular, если такая альтернатива существует.

В нашем случае, это так, и она представляет себя как «Местоположение 'сервис, который вы можете внедрить в ваш компонент. 

import { Location } from '@angular/common';

@Component({
  // Other component info
  providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}]
})
export class TestComponent {
   constructor(private location: Location, // Other constructor arguments) { }

   public goBack() { 
      this.location.back()
   }
}

https://alligator.io/angular/location-service/

1 голос
/ 17 февраля 2020

Что-то вроде этого должно работать: routerLink = "../"

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

...