Angular2：組件和服務之間的範圍？

我正在開發一個大的Angular2應用程序。該應用程序包含許多具有類似行爲的組件。遵循DRY原則，我在共享服務中包含了所有常見的組件功能。Angular2：組件和服務之間的範圍？

但是，對於大多數組件（例如foo.component.ts），我有一個相應的「個人」服務來獲取特定組件的數據（例如foo.service.ts）。總結所有組件使用2個服務，他們是自己獨特的服務和共享的服務。「個人」服務的代碼如下所示：

export class MasterDataService { 
    getData(param) { 
    return this._http.get("some/url/"+param+"/) 
     .map((res) => { 
     return res.json(); 
     }) 
    } 
}

當前，我的組件使用共享服務來獲取數據。我現在做的方式是通過調用共享服務的功能和發送「個人」的服務作爲一個參數設置爲該函數：

public initializeController(dataService, component:any) { 
    this._activatedRoute.params.subscribe(
     (param: any) => { 
     this._param = param; 

     dataService.getData(param).subscribe(
      data => this._httpSuccess(data, component), 
      err => this._httpError(err) 
     ); 

     } 
    ); 
    }

在同樣的功能我也派我的組件作爲一個參數：

// In component 
    this._controller.initializeController(this);

原因是我的組件中有一個dataModel，它包含我的HTML數據。通用共享服務負責調用個人服務，並更新組件中的dataModel。

setLocalData(data) { 
    console.log("Callback fired!!"); 
    this.masterdataModel = data; 
    this.loading = false; 
    } 

this.dataModel = { 
     data_1: "foo", 
     data_2: "bar", 
    };

我發現這樣的作品，通過發送通過我的共享服務設置在我的組件我的模型數據時的解決方案「這一」從我的組件到我的服務功能的放慢參數：

// In component 
this._controller.initializeController(this); 

// In service 
public initializeController(component:any) { 

    component.dataModel = {/* some new data */} 
}

我將個人服務和組件作爲參數發送，因爲我無法以任何其他方式從共享服務訪問回調函數或個人服務。

問題1：如何構造這個通用服務或函數，可以從每個組件具有的「個人」服務調用函數？我是以正確的方式進行還是有更好的方法？

問題2：我的組件如何調用服務函數或設置組件回調或從我的服務訪問組件中的變量？

問題3：我之所以覺得這非常困難是因爲我使用「=>」在我的共享服務中切換「this」的上下文，這就是爲什麼我最終將組件作爲參數。這有什麼解決方案？

任何幫助，非常感謝！

來源

2016-11-30 Vingtoft

您可以提供在該組件的「貼身服務」，則每個組件實例都有自己的服務實例（不知道這是你想要的）

@Component({ 
    selector: 'my-component', 
    providers: [MyComponentPersonalService] 
    ... 
}) 
class MyComponent { 
    constructor(private personalService:MyComponentPersonalService) {}

問題1：我建議你在共享服務中創建一個方法，該方法返回Observable，並且個人服務訂閱該可觀察對象，並在共享服務發出值時執行必要的操作。

問題2：同問題1

問題3：圍繞這樣通過引用是很奇怪的，應在所有

參見https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service避免與觀測的例子。

來源

2016-11-30 14:16:03

Angular2：組件和服務之間的範圍？

回答

相關問題