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

Question

类的结构是：

/* 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 接口，这将调用服务。

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

Answer 1

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

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