时间戳

首页 > 解决方案 > 如何替换 Angular 组件中的服务实现？

angular - 如何替换 Angular 组件中的服务实现？

问题描述

类的结构是：

/* Common class */

interface Tree {
}

class TreeBase {
   // Commmon methods for all successors
}

具体类：

interface TreeLayersActions { do(): void; }
interface TreeMapActions { make(): void; }

TreeLayers extends TreeBase implements TreeMapActions {
}

TreeMap extends TreeBase implements TreeLayersActions{
}

因此，我尝试将具体实现注入组件：

export class TreeComponent implements OnInit, OnDestroy, TreeLayersActions, TreeMapActions {
   constructor(private tree: TreeBase) {

   }

         make(): void {
          this.tree.getNodeStyles(node); // Here problem
       }
       do(): void {}
}

问题是getNodeStyles没有出现在private tree: TreeBase. 因为它是具体的实现。

我试过这个：

constructor(private tree: TreeLayers | TreeMap) {
}

组件应该与不同的服务实现一起工作，以将执行委托给服务。

我决定创建一个服务来创建一个特定的树实例并实现所有具体类的所有接口：

class TreeService implements TreeLayerActions, TreeMapActions {
  public tree: TreeLayers | TreeSearch;

  constructor(type: string) {
      switch (type) {
      case "layers":
        this.tree = new TreeLayers(null);
        break;
      case "map":
        this.tree = new TreeSearch(null);
    }
 }

 /* Realization interfaces TreeLayerActions and TreeMapActions that deligates calls to service
 changeTileLayer(treeNode: TreeNode): void {
    this.tree.changeTileLayer(treeNode: TreeNode);
 }
 // Other methods
}

所以，然后在组件中我可以注入服务TreeService并实现TreeLayerActions, TreeMapActions, Tree接口，这将调用服务。

我认为这是一个肮脏的解决方案，因为我通过每个实现的所有方法污染了组件。

标签： angular

解决方案

在模块中，您可以“提供”另一个要使用的类：

providers:[{ provide: Tree, useClass: AnotherTree }]

推荐阅读