Question

我是Angular > v1的新手，我正在努力了解一些概念（来自React / Redux背景）。

我有一个RESTful API，我想从API中获取数据并将其显示在视图/路线1中，然后允许用户向下钻取并在视图/路线2中查看更多信息（使用{{1} }来获取相关对象。

但是，我发现Angular在每次视图/路线更改时都下载API数据。您通常如何解决此问题，还是要解决此问题，或者Angular开发人员通常使用其他模式？

.filter()

// src/app/core/api-client.service.ts

import { Injectable } from '@angular/core';
import { HttpClient  } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiClientService {

  domains;

  constructor(private http: HttpClient) { }

  getDomains() {
    console.info(this.domains);
    if (this.domains && this.domains.length) {
      return this.domains;
    }
    this.domains = this.http.get<Array<any>>('http://192.168.33.11:3000/domains/list');
    return this.domains;
  }

  getHostCapabilities() {
    return this.http.get<Array<any>>('http://192.168.33.11:3000/host/capabilities');
  }
}

// src/app/components/domains-list/domains-list.component.ts

import { Component, OnInit } from '@angular/core';
import { ApiClientService} from '../../core/api-client.service';

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

  domains: any;

  constructor(private ApiClient: ApiClientService) {}

  ngOnInit() {
    this.ApiClient.getDomains().subscribe(data => this.domains = data);
  }

}

Answer 1

您可以使用shareReplay(1)与新订户共享最新数据。但是据我从您的代码了解到的，您只想加载域一次。因此，您可以在服务构造函数上调用http请求，然后与可观察到的domains共享数据，如下所示：

import { Injectable } from '@angular/core';
import { HttpClient  } from '@angular/common/http';
import {Observable} from 'rxjs';
import {shareReplay} from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class ApiClientService {

  domains: Observable<Array<any>>;

  constructor(private http: HttpClient) { 
     this.observable = this.http.get<Array<any>>('http://192.168.33.11:3000/domains/list');
  }

  getDomains() {
    return this.domains.pipe(shareReplay(1));
  }

  getHostCapabilities() {
    return this.http.get<Array<any>>('http://192.168.33.11:3000/host/capabilities');
  }
}

Answer 2

在第一条路线中获取数据后，将其存储在浏览器本地存储中。然后在下一个路由中使用该本地存储数据。（是的，存在安全隐患。）

Answer 3

您可以使用@ ngrx / store。这是Redux for Angular的实现。

Angular 6/7：仅从API提取数据一次，但以两种途径/视图显示

3 个答案: