0

在以下场景中组织组件、服务的最佳实践是什么。

在我们的产品中，有 70-80 个组件，每个组件也有一个可注射的服务。

并且最大所有下拉选项数据都通过 api 动态获取

方法

  AComponent - Aservice,
  BComponent-Bservice,
  CComponent-Cservice
  DComponent-Dservice..................

案例：正如我上面所说，所有下拉菜单都是动态方式， AComponent 注入 Aservice、Bservice、Dservice等等

当前代码现在使用 Promise 组织成这样

 class Acomponent {
  constructor(private aservice: Aservice, private bservice: Bservice, private dservice: Dservice....) {}
  ngOnInit() {
   this.loading = true;
   this.aservice.getAData().then(res => {
    this.bservice.getBData().then(res => {
     this.cservice.getCData().then(res => {
      this.loading = false;

     })
    })
   })
  }
 }

 Aservice:
  class Aservice {
   getAData() {
    return this.http.get(appSettings.apiUrl + '/RMAN_PRODUCTS')
   }

   class Bservice {
    getBData() {
     return this.http.get(appSettings.apiUrl + '/RMAN_CUSTOMES')
    }

    class Cservice {
     getCData() {
      return this.http.get(appSettings.apiUrl + '/RMAN_PRICELIST')
     }

    }

应用设置.ts

 export var apiUrl = 'http://localhost:8081/api';

在上述情况下，都是独立的服务功能，彼此之间没有依赖关系。在从所有 api 获取所有数据后要记住的一件事是我只需要加载页面，并且在 http 中的 apiurl 中，直到在该路由之后使用的端口号一个常量变量被硬编码

所以我想使用订阅者使用angular forkjoin来清理代码。在以下解决方案中，这是最佳实践

解决方案1：在组件本身中使用fork join

   class Acomponent {
    constructor(private aservice: Aservice, private bservice: Bservice, private dservice: Dservice....) {}
    ngOnInit() {
     this.loading = true;
     forkJoin(
      this.aservice.getData(),
      this.bservice.getBData() this.cservice.getCData()
     )
     responses.subscribe(res => {
      console.log(res) // [{}, {}, {}] // lenght 3
     })



    }
   }


   Solution2:
    (a) class Aservice {
     getData() {
       return forkJoin(this.http.get(appSettings.apiUrl + '/RMAN_PRODUCTS/producttype="xoc"',
          this.http.get(appSettings.apiUrl + '/RMAN_CUSTOMES/customertype="bix"'
           this.http.get(appSettings.apiUrl + '/RMAN_PRICELIST')
          }
         }
         (or)
         (b) apiurls.ts
         export var apis = {
          produts: '/RMAN_PRODUCTS/RMAN_PRODUCTS/producttype="xoc"',
          customers: '/RMAN_CUSTOMES/customertype="bix"',
          pricelist: '/RMAN_PRICELIST'
         }
         A.service.ts

         class Aservice {

          getData() {
            return forkJoin(this.http.get(appSettings.apiUrl + apis.produts: ,
               this.http.get(appSettings.apiUrl + apis.customers:
                this.http.get(appSettings.apiUrl + apis.pricelist)
               }
              }
              class Acomponent {
               constructor(private aservice: Aservice) {}
               ngOnInit() {
                this.aservice: getData().subscibe(res => {
                 console.log(res) // [{}, {}, {}] // lenght 3
                })
               }

注意事项

在所有组件中

 . Above two approaches are doing same but my dought is which will be better and best practice? and why?

 . with  solution1 there is less work modify code in all components(60-80)

 . In solution 2 (a), (b) we can remove services like Bservice, Cservice from componentA

 . with Solution 2 (a) api urls are hard coded, twise, thires if required more time time .

我的经理告诉我在 api 中更改参数值的机会更少，例如： '/RMAN_PRODUCTS/RMAN_PRODUCTS/producttype="xoc"' // "xoc"(parameter)

. 但即使我在想，如果我遵循 seccode 方法（解决方案 2(b)），即使我改变了参数或路由，那么它'非常容易并且改变它所花费的时间更少）

 >Doubts:::
   1. Inject the services in componets is the good approch or not ?
   2. Is many services injcetion will take more time to bundle and comipe?
   3. Which solution is good and why in your words with clear explation?

 Please help me, Before Going to work I want to consider all facts. 

  Thanks in advance
4

0 回答 0