Question

我有一个要求，组件上的搜索功能必须触发“历史点”，以便用户可以单击浏览器中的“后退”按钮并向后浏览不同的结果。最终，他们还希望能够导航到单独的组件（项目详细信息），并且仍然能够单击并返回到其搜索项列表。想想诸如搜索订单，按日期和状态过滤，查看列表，然后单击“订单详细信息”之类的事情。您将被带到“订单详细信息”组件，然后单击“返回”将带您回到过滤后的订单列表。

以我的理解，应该通过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>

Answer 1

我认为可以使用RouteReuseStrategy来实现。这是一个指导您如何实现此目标的教程。 https://medium.com/@gerasimov.pk/how-to-reuse-rendered-component-in-angular-2-3-with-routereusestrategy-64628e1ca3eb

Angular 2+浏览器历史记录和后退按钮

1 个答案: