每次我使用路由导航到组件时都会获取角度 http答案

【问题标题】：angular http fetching every time i navigate to component using routing每次我使用路由导航到组件时都会获取角度 http
【发布时间】：2018-08-23 04:22:33
【问题描述】：

每次我使用路由导航到组件时，我都使用 6.1.3 角度 HTTP 获取。我是角度的新手。

谁能帮忙。

我正在ngOnninit 中获取数据我认为是问题所在

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

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

  constructor(
    private httpDataGetter: HttpClient
  ) { }

  ngOnInit() {
    this.httpDataGetter.get('https://my-json-server.typicode.com/alifrontend499/userdatafake/profile').subscribe(responsive => {
      $(responsive).each((count, obj) => {
        this.userdata.push(obj);
      });
    }, err => {
      console.log(err);
    });
  }

  userdata = []

}

我希望当我导航到我的链接（例如它的主组件）中的链接时获取值我首先导航到 homecomponent 它会获取很好的值，但是当我导航到登录并返回 homecomponent 时，它会再次获取值。我不想要了。还有其他方法吗？

【问题讨论】：

当您将获取逻辑放在onInit 中时，每次我猜它都应该加载数据。如果你能更多地解释这个问题，那就更好了。
你在 ngOnIt() 中编写的任何代码，只会在构造函数实例化后调用一次，你可以在页面重新加载时说。因此，您共享的代码可能没有问题。你能解释一下你的问题吗
我已经编辑了这个问题。请检查您是否可以提供帮助

标签： javascript angular

【解决方案1】：

如果您不想继续重新获取数据，则可以将请求移动到服务中并使用 ReplaySubject 为该服务实现缓存。

Angular 2 cache observable http result data

【讨论】：

【解决方案2】：

创建一个服务并将userdata 保存为：

上门服务

@Injectable()
export class HomeService {
  private userdata;

  constructor(private http: HttpClient) { }

  getData() {
    if(!userdata) { // it will only hit api if data is not there
        this.http.get('https://my-json-server.typicode.com/alifrontend499/userdatafake/profile').subscribe(responsive => {
            this.userdata = [];
            $(responsive).each((count, obj) => {
                this.userdata.push(obj);
            });
        }, err => {
            console.log(err);
        });
    }  
  }

  get UserData() {
    return this.userdata;
  }
}

主页组件

export class HomeComponent implements OnInit {

  constructor(
    private service: HomeService;
  ) { }

  ngOnInit() {
    this.service.getData();
  }

  get userdata() {
    return this.service.UserData;
  }
}

另外，将jQuery 与Angular 一起使用也不是一个好习惯。

【讨论】：

【解决方案3】：

每次路由更改时，Angular 路由器都会销毁组件，在路由到“Home”时，每次都会调用 onInit。 这是一个路由器/角度生命周期。您可以定义重用策略，如果满足条件，路由器将不会销毁组件并在路由返回时重用组件。（不会调用构造函数和onInit）

解决此问题的方法是使用全局存储 (Ngrx) 或 AppModule 级别提供的全局服务。

使用单例模式获取数据，当 null / undefined 不返回 Object 时进行 http 调用。

RouteReuseStrategy

【讨论】：