Question

嗨，我无法使用浏览器后退/前进按钮进行导航。它仅在通过路由参数共享相同组件的路径之间导航时发生。

我有一个列出很多动物的应用程序。每次我导航到example.com/animal/cat或example.com/animal/dog时，都会向一个返回相关数据的宁静Api发出Http Get请求。如果我导航到/ animal / cat然后到/ animal / dog一切似乎都可以。当我点击浏览器后退按钮返回/ animal / cat时，问题就出现了。 URL不会为cat加载数据，而是仍会为狗列出数据。我正在使用带有RC4的路由器3.0.0-beta.2。

继承我的动物详情。组件页面：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ROUTER_DIRECTIVES, ActivatedRoute, Router } from '@angular/router';
import { Response } from '@angular/http';
import { Subscription } from 'rxjs/Rx';

import { DataService } from '../../data.service';

@Component({
  moduleId: module.id,
  selector: 'animal-details',
  templateUrl: 'animal-details.component.html',
  styleUrls: ['animal-details.component.css'],
  directives:[ROUTER_DIRECTIVES]

})
export class AnimalDetailsComponent implements OnInit, OnDestroy {

  constructor(private activatedRoute: ActivatedRoute, private dataService: DataService, private router: Router) {

  }

  private subscription: Subscription;

  animal = {};

  link: string;
  table = 'animal/';
  private url = '?related=family_by_link';


  ngOnInit() {
    this.subscription = this.activatedRoute.params.subscribe(
    (param: any) => this.link = param['link']
    );

    this.dataService.getData(this.table, this.link, this.url)
    .map((response: Response) => response.json())
    .subscribe(
      (data: any) => {this.animal = data},
      err => { console.log('error404') }
    );
  };
  nextData(){
    this.dataService.getData(this.table, this.link, this.url)
    .map((response: Response) => response.json())
    .subscribe(
      (data: any) => {this.animal = data},
      err => { console.log('error404') }
    );
    window.scroll(0,0);
  };

  ngOnDestroy() {
    this.subscription.unsubscribe();
  };

}

在同一组件上的动物之间导航时，我使用getData（）方法。我的AnimalComponentDetails html：

<div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3 text-xs-center" *ngFor="let family of animal.family_by_link" (click)="nextData()">
    <a [routerLink]="['/animal', family.ani_link]">
    <img src="/images/animal/{{family.ani_link}}.png">
    <p>{{family.name}}</p>
    </a>
</div>

继承我的DataService：

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Subscription, Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map'

@Injectable()
export class DataService {

  constructor(private dataService: Http) {
  }
  urlprefix = 'http://123.123.123.123/api/v2/_table/';
  api = '&api_key=7201521drgdc71';

  getData(table, link, url): Observable<any> {
    return this.dataService.get(this.urlprefix + table + link + url +this.api);
  }
}

我的app.routes：

  import { provideRouter } from '@angular/router';
  import { AnimalComponent } from './animal/animal.component';
  import { AnimalDetailsComponent } from './animal/animal-details/animal-details.component'

  { path: '', component: HomeComponent },
  { path: 'animal', component: AnimalComponent },
  { path: 'animal/:link', component: AnimalDetailsComponent },
  { path: '**', redirectedTo: 'error404', component: Error404Component }
];

export const APP_ROUTES_PROVIDER = [
  provideRouter(APP_ROUTES)
];

我的靴子：

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppComponent, environment } from './app/';
import { HTTP_PROVIDERS } from '@angular/http';

import { APP_ROUTES_PROVIDER } from './app/app.routes'

if (environment.production) {
  enableProdMode();
}

bootstrap(AppComponent, [APP_ROUTES_PROVIDER, HTTP_PROVIDERS]);

Chrome网络指示当我通过浏览器按钮在animal /：cat和animal /：dog之间的同一组件上向后或向前导航时，除非我更改为其他组件，否则不会发出新的Http请求。

这是我失败的最后一个错误。非常感谢任何帮助，谢谢！

使用后退/前进浏览器按钮在相同组件之间导航不起作用

0 个答案: