Question

我将angularJS应用程序迁移到新角度（v5.x）。我有一个基本的CRUD应用程序，我从REST服务中提取所有数据并在我的应用程序的多个区域共享它。

我正在尝试在新的角度框架（v5.x）中重新创建该应用程序。我难以理解的是存储数据的最佳方法是什么？

在AngularJS中，我曾经将我的数据存储到主要范围中，然后由应用程序的各个区域使用。我需要为我的各种组件做同样的事情。

阅读多个指南我的基本HTTP服务正常运行：

import { Injectable } from '@angular/core';
import { environment } from '../environments/environment';

import { HttpClient } from "@angular/common/http";
import { Observable } from 'rxjs/Observable';
import { Incident_Model } from './incident_model';

const BackEnd_URL = environment.BackEnd_URL;

@Injectable()
export class CommonService {

  constructor(private http: HttpClient ) { }

  // API: GET /incidents
  getAllIncidents(): Observable<Incident_Model[]> {

    return this.http.get<Incident_Model[]>(BackEnd_URL + '/Incidents');

  }

}

从这里开始，在不必多次调用API的情况下，在我的组件之间共享数据的最佳做法是什么？查看各种指南，似乎没有什么能与我的情景相符。

这就是我使用Angular Material表的方法，但这似乎调用了API，这是我试图避免的。我宁愿只在Init上调用一次API，然后在需要时以某种方式在本地获取数据。

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { CommonService } from '../common.service'; 

import {Observable} from 'rxjs/Observable';
import {DataSource} from '@angular/cdk/collections';
import { Incident_Model } from '../incident_model';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss'],
  encapsulation: ViewEncapsulation.None
})

export class DashboardComponent implements OnInit {

  constructor (private commonService: CommonService) {}
  public dataSource = new IncidentDataSource(this.commonService);
  displayedColumns = ['test1', 'test2', 'test3', 'test4'];

  ngOnInit(){}
}

export class IncidentDataSource extends DataSource<any> {
  constructor(private commonService: CommonService) {
    super();
  }
  connect(): Observable<Incident_Model[]> {
    return this.commonService.getAllIncidents();
  }
  disconnect() {}
}

跨多个组件共享HTTP数据的最佳实践

0 个答案: