Question

在beolw方案中组织组件和服务的最佳实践是什么。

在我们的产品中，有70-80种成分，每种成分也具有一种注射剂。

并且所有下拉菜单中的数据最多都是通过api动态获取的

表示

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

案例：正如我之前所说，所有下拉菜单都是动态方式， AComponent会依次注入Aservice，Bservice，Dservice

现在，使用诺言这样组织当前代码

 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')
     }

    }

appsettings.ts

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

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

所以我想使用订阅服务器的 angular forkjoin 清理代码。下面的解决方案是最佳做法

解决方案1：在组件本身中使用派生联接

   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)

。但是，即使我在思考，即使我更改了参数或路线，也遵循了secode方法（解决方案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

哪些因素会影响产品的捆束大小和零件组合，并在以下情况下进行组织构造？

0 个答案: