时间戳

首页 > 解决方案 > Angular 的数据访问模式

angular - Angular 的数据访问模式

问题描述

我在 Angular 8 应用程序（来自 .NET）中使用异步数据访问模式苦苦挣扎。我正在使用组件、服务进行数据访问，以及对来自服务的数据起作用的自定义类。似乎我应该将我的数据访问服务注入到我的组件中——但是我在哪里可以利用我的自定义类来实现业务逻辑呢？

我想要什么：

零件：

import { Component, OnInit } from '@angular/core';
import { SampleService } from '../services/sample.service';
import { CustomBusinessLogic } from '../../cbl'; 


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

  constructor(private sampleService: SampleService) { }

  ngOnInit() { }

  doSomething() {

    const dataToActOn = this.sampleService.getDataToActOn();

    // Do something with dataToActOn here

      const p = new CustomBusinessLogic.Calculator(
        dataToActOn.params as Settings,
        dataToActOn.data1,
        dataToActOn.data2
      );

      const res = p.calculate();
  }
}

服务：

import { Injectable } from '@angular/core';
import { ExampleDataService } from './data/example-data.service';
import { SettingsService } from './data/settings.service';
import { forkJoin } from 'rxjs';

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

  data1: any[];
  data2: any[];
  params: [];

  constructor(private projections: ,
    private data: ExampleDataService, private settingsService: SettingsService) { }


  loadDataHttp() {

    const id = 'for-testing';
    const b = this.data.getDataSet1(new Date());
    const p = this.data.getDataSet2(new Date());
    const m = this.settingsService.getDataSet3(id, 2018);

    return forkJoin([b, p, m]);

  }

  getDataToActOn() {

    this.loadDataHttp().subscribe(data => {
      this.data1 = data[0];
      this.data2 = data[1];
      this.params = data[2];

      // HOW DO I RETURN THIS DATA TO THE COMPONENT 
      // AND HAVE IT AVAILABLE TO MY CUSTOM BUSINESS LOGIC??

    });
  }
}

我的问题（在这个伪/示例代码中）是当我的组件到达时new CustomBusinessLogic.Calculator，还没有从服务返回任何数据。

我该如何重新构建它，以便我可以对从我的组件或其他服务中的服务返回的数据采取行动？

谢谢！

标签： angulardesign-patternsrxjsobservabledata-access

解决方案

改变这个：

getDataToActOn() {
   this.loadDataHttp().subscribe(data => {
    this.data1 = data[0];
    this.data2 = data[1];
    this.params = data[2];
    // What now?
});

}

为此在服务中：

getDataToActOn() {
   return this.loadDataHttp();
}

也改变这个：

doSomething() {

    const dataToActOn = this.sampleService.getDataToActOn();

    // Do something with dataToActOn here

    const p = new CustomBusinessLogic.Calculator(
        dataToActOn.params as Settings,
        dataToActOn.data1,
        dataToActOn.data2
    );

   const res = p.calculate();
}

在组件中对此：

doSomething() {
   this.sampleService.getDataToActOn().subscribe(
        (dataToActOn) => {
            const p = new CustomBusinessLogic.Calculator(
                dataToActOn.params as Settings,
                dataToActOn.data1,
                dataToActOn.data2
            );
            const res = p.calculate();
        }
    );
}

对不起，如果格式有点搞砸了。

getDataToActOn 现在显然有点薄了。您可以使用该方法将参数、选项和标头正常传递给 http 服务。

推荐阅读