Angular 2+ История браузера и Кнопка Назад - PullRequest
Новая
       9

Angular 2+ История браузера и Кнопка Назад

0 голосов
/ 30 июня 2018

У меня есть требование, чтобы функции поиска в компоненте запускали «исторические точки», чтобы пользователь мог нажать кнопку «Назад» в браузере и перемещаться назад по различным результатам. В конечном итоге они также хотят иметь возможность перейти к отдельному компоненту (сведения об элементе) и при этом иметь возможность щелкнуть назад и вернуться к списку элементов в результате поиска. Придумайте что-то вроде поиска заказов, фильтрации по дате и статусу, просмотра списка и затем нажатия «Детали заказа». Вы попадете в компонент сведений о заказе, а затем щелчок назад вернет вас к отфильтрованному списку заказов.

Как я понимаю, это должно быть возможно с помощью некоторой комбинации router и location?

Я попытался реализовать этот очень простой пример, который должен устанавливать новую точку истории каждый раз, когда в списке выбора выбирается новое значение, но пока ничего из того, что я пробовал, не работает.

Ссылка на StackBlitx: https://stackblitz.com/edit/angular-1vfhwv?file=src%2Fapp%2Fhome%2Fhome.component.ts

Компонент TS 

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

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {


  ngOnInit() {
  }

  constructor(
    private router: Router,
    private location: Location
  ){}
  colors: string[] = ['Red','Green','Blue', 'Purple', 'Black', 'White'];
  selectedColor = this.colors[0];
  selectedColors: string[] = [this.selectedColor];

  selectedColorChanged(event)
  {
    this.selectedColors.push(event.target.value);
    var uniqueValue = this.newGuid();
    //this.router.navigateByUrl("");
    this.location.replaceState("", uniqueValue);
  }

  back(){
    this.location.back();
  }

  newGuid() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
            var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
            return v.toString(16);
        });
    }

}

Компонент HTML 

<select [(ngModel)]="selectedColor" (change)="selectedColorChanged($event)">
  <option *ngFor="let c of colors">{{c}}</option>
</select>

<p>
  Selected Color: {{selectedColor}}
</p>

<div>
  Selected Colors:
  <div *ngFor="let c of selectedColors">
    {{c}}
  </div>
</div>

1 Ответ

0 голосов
/ 30 июня 2018

Я думаю, что это может быть достигнуто с помощью RouteReuseStrategy Вот учебник, который научит вас, как это реализовать. https://medium.com/@gerasimov.pk/how-to-reuse-rendered-component-in-angular-2-3-with-routereusestrategy-64628e1ca3eb

...