Angular - Dependency使用具有參數的構造函數注入對象/類

我想在我的項目中抽象樹組件，具體爲JSTree。所以我爲JSTree編寫了一個接口和一個適配器來實現這個接口。由於單元測試，我正在使用依賴注入。Angular - Dependency使用具有參數的構造函數注入對象/類

要構建樹（jstree），需要一個DOM Id，並需要構建該樹所需的JSON數據。
從服務器獲取數據，這意味着爲了適配器是正確的構造函數需要用給定的數據構造三個
問題是當我創建一個構造函數，我無法使用依賴注入與適配器（我可以注入佔位符/ id但不是來自服務的數據）

類在類圖上可見（小錯誤TreeService和提供程序之間的連接應該是聚合）：

問題是TreeService必須從服務器獲取數據，認爲提供者將其傳遞給JSTreeComponents構造函數以創建它。這意味着JsTreeComponent不能再是@Injectable（），這就限制了類的可測試性。

問題：

是否應TreeService構建/注入JsTreeComponent還是應該TreeComponent做或事件擴展它作爲基類
如何解決JsTreeComponent是角/打字稿altrought的一個針劑構造函數必須用來自服務器的數據調用（請不要建議使它成爲像tree.loadData（json）的方法）

在TreeService中創建它的可能方法 - angular2 /打字稿但也可能是angularjs：

@Injectable() 
    export class TreeService { 

     chapters: any; 
     treeHandler: ITreeComponent; 
     readonly placeholder: string = 'tree-placeholder'; 

     constructor(private treeProvider: TreeProvider, 
      @Inject(new JsTreeComponent(this.placeholder, ????data??)) tree: ITreeComponent) { } 

     initializeTree(placeholder: string): Observable<Response> { 
      let provider = this.treeProvider.getNodes(); 
      provider.subscribe(
       (data: any) => { 
        this.treeHandler = <ITreeComponent>(new JsTreeComponent(placeholder, data)); 
       } 
      ); 
      return provider; 
     } 
    }

顯示了兩種方法，第一種是使用「新」創建它，但問題是可測試性。第二個是注入它，但問題是，我不能傳遞從提供商加載的數據來構建樹，我不想使用像.loadData（json）這樣的函數 - 它應該考慮構造函數。

我也可以用Singletone迫使JsTreeComponent與數據，但「搭橋」的構造函數使用單

來源

2017-02-13 teter

爲什麼不能ü傳遞數據從類變量 –

注入組件的服務通常是沒有意義的Angular2。我不清楚你想要完成什麼。你爲什麼想這樣做？ –

我也可以注入它或在組件/控制器中擴展它。只有擴展解決了注入的問題，但我仍然有一個問題，如何強制傳遞數據參數給構造函數，我的意思是我可以通過組件構造函數中的超類來實現。 – teter

一個解決方案來構建，但我不認爲這是最佳的。現在適配器是可注入的，所以它可以很容易地在測試中模擬，並與角度樹TreeComponent隔離（我可以輕鬆地用另一個組件替換jstree，或者在使用打字機時將angularjs和angular之間的角度遷移到角度）。

@Injectable() 
export class JsTreeAdapter implements TreeInterface { 

    private static _instance: JsTreeComponent; 

    public constructor() { 
     throw new Error("Error: Instantiation failed: Use JsTreeComponent.getInstance() instead of new."); 
    } 

    public static getInstance(placeholder: string, data: any): JsTreeComponent { 
     if (this._instance) 
      return this._instance; 
     else { 
      this._instance = new this(); 
      this._instance.constructTree(placeholder, data); 
      return this._instance; 
     } 
    } 
}

，並在構造函數中注入：

@Component({}) 
export class TreeComponent { 

    readonly placeholder: string = 'tree-placeholder'; 
    treeHandler : TreeInterface; 

    constructor(private treeService: ChapterTreeService, private treeHandler: JsTreeAdapter) { 
     this.treeService.getNodes().subscribe((data: any) => { 
      this.treeHandler = ChapterJsTree.getInstance(this.placeholder, data); 
     }); 
    } 
}

來源

2017-02-14 10:12:32 teter

this.treeHandler = ChapterJsTree.getInstance（this.placeholder，data）; 我認爲這真的很醜，但我不確定是否需要重新參考它可能是 – teter

Angular - Dependency使用具有參數的構造函數注入對象/類

回答

相關問題