Angular 角度8后退按钮和参数

我有一个应用程序，当点击浏览器后退按钮时，我需要获取导航路线的一些参数。 我有家的看法，我已经从和日期。当我从主视图导航到目录时，我传递Datefrom和DateTo参数。我在新路线上成功地接待了他们。但是，当我单击“上一步”按钮时，如何在主视图（上一路线）中接收datefrom和dateto？

---

我的问题有一个答案？

单向：

使用

在home的ts组件中的navigate（）中，使用“state”对象切换路由时，保留dateFrom和dateTo变量的状态

第二种方式：

使用

在HTML模板中

---

您可以使用window.history.state属性读取值。

技术上，后退按钮刷新页面。因此，要保存日期，您需要执行以下两个选项之一：

1） 用于存储和检索数据的会话存储（检索时保存数据，如果数据不存在，则从会话存储中获取数据）

2） 将其保存为跨所有页面的查询参数（我看到您已经在一个页面中这样做了），这样，如果用户试图返回，他仍然可以从url获取数据

export class HomeViewComponent {
  dates;

  constructor(
    private actR: ActivatedRoute,
    private router: Router
  ) { }

  ngOnInit() {
    this.dates = this.actR.queryParams;
  }

  navigate(url) {
     this.router.navigate([
      url,
      {
        dateFrom: this.dates.dateFrom, //retrieved with ActivatedRoute
        dateTo: this.dates.dateTo
      }
    ]); // it will take urls with it
  }
}

在HTML中

<a (click)="navigate('/about')">About</a>

关于

您可以在目录组件中添加角度事件侦听器来检测popstate事件 事件触发后，在窗口对象上存储数据，并使用共享服务在主组件中获取数据。以下是一个工作示例：

数据服务

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable()
export class DataService {

  private dates = new BehaviorSubject({});

  constructor() {}

  fetchDates(): Observable<any> {
    return this.dates.asObservable();
  }

  sendDates(dateFrom: Date, dateTo: Date) {
    this.dates.next({dateFrom: dateFrom, dateTo: dateTo});
  }

}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.routing.module';
import {DataService} from './data.service';

@NgModule({
  declarations: [ AppComponent],
  imports: [ 
    AppRoutingModule, 
    BrowserModule, FormsModule, HttpModule 
  ],
  providers: [DataService],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

---

希望有帮助

当我点击后退按钮时，如何将其保存为查询参数？而不是当您点击后退按钮时。您可以将日期保存为查询参数，以便在需要时单击“上一步”仍能找到它们。我知道您可能会认为url会很混乱，这就是为什么我将其作为第二个选项添加。我如何将其保存为查询参数？您将创建一个（单击）事件，该事件将触发导航（url），并将url作为您要访问的页面的参数，如上面的示例所示（刚刚更新）.但我不会点击链接或点击html中的某个地方返回。我只需点击browserbut的back按钮，但如果我在与参数没有任何关系的其他页面上导航，然后再次访问主页，它将不会从状态中读取参数。只有当我来自目录页面时，参数才应该准备好，带有@viewChild，角度为，将值从一个组件传递到另一个组件。Thabka，请回答。我想避免使用服务事件侦听器和状态，我正在寻找一种基于angular router的方法来实现这一点。从我所看到的角度来看，angular不支持这种开箱即用的方法

<a (click)="navigate('/about')">About</a>

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable()
export class DataService {

  private dates = new BehaviorSubject({});

  constructor() {}

  fetchDates(): Observable<any> {
    return this.dates.asObservable();
  }

  sendDates(dateFrom: Date, dateTo: Date) {
    this.dates.next({dateFrom: dateFrom, dateTo: dateTo});
  }

}

import { Component, OnInit, HostListener } from "@angular/core";
import { Http } from "@angular/http";
import { ActivatedRoute } from "@angular/router";
import { DataService } from '../../data.service';

@Component({
  selector: "catalog",
  template: `
    <h1>Catalog</h1>
  `
})
export class CatalogViewComponent implements OnInit {
  dateFrom: Date;
  dateTo: Date;

  constructor(private route: ActivatedRoute, private dataService: DataService) {

  }

  @HostListener('window:popstate', ['$event'])
  onPopState(event) {
    console.log('Back button pressed');
    this.dataService.sendDates(this.dateFrom, this.dateTo);
  }

  ngOnInit() {
    if (this.route.snapshot.params["dateFrom"])
      this.dateFrom = new Date(+this.route.snapshot.params["dateFrom"]);

    if (this.route.snapshot.params["dateTo"])
      this.dateTo = new Date(+this.route.snapshot.params["dateTo"]);

  }

}

import { Component, OnInit } from "@angular/core";
import { Http } from "@angular/http";
import { Router } from "@angular/router";
import { DataService } from '../../data.service';

@Component({
  selector: "home",
  template: `
    <div>
      <h1>Home</h1>
      <h3>Total users: # {{ users?.length }}</h3>
      <button (click)="navigate()">Click</button>
    </div>
  `
})
export class HomeViewComponent implements OnInit {
  users;
  dateFrom: Date;
  dateTo: Date;

  ngOnInit() {
    this.dataService.fetchDates().subscribe(dates => {
      this.dateFrom = dates.dateFrom;
      this.dateTo = dates.dateTo;
    });
    console.log(this.dateFrom);
    console.log(this.dateTo);
  }
  constructor(private http: Http, private router: Router, private dataService: DataService) {
    this.http
      .get("https://jsonplaceholder.typicode.com/users")
      .map(res => res.json())
      .subscribe(res => (this.users = res));
  }
  navigate() {
    //initialize values to send
    this.dateFrom = new Date();
    this.dateTo = new Date();

    this.router.navigate([
      "/catalog",
      {
        dateFrom: this.dateFrom.valueOf(),
        dateTo: this.dateTo.valueOf()
      }
    ]);
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.routing.module';
import {DataService} from './data.service';

@NgModule({
  declarations: [ AppComponent],
  imports: [ 
    AppRoutingModule, 
    BrowserModule, FormsModule, HttpModule 
  ],
  providers: [DataService],
  bootstrap: [ AppComponent ]
})
export class AppModule { }