Angular 2服務獲取返回undefined

在我當前的項目中，我有一個非常簡單的服務，它在請求來自第一個頁面並使用相同服務在第二個頁面中顯示請求時設置字符串。設置文本正常工作。但是當我調用get函數時，它返回undefined。Angular 2服務獲取返回undefined

這是我的服務

import { Injectable } from '@angular/core'; 

@Injectable() 
export class TsService { 

    constructor() { } 

    ts: string; 

    getTs() : string { 
     return this.ts; 
    } 

    setTs(ts) : void { 
     this.ts = ts; 
    } 

}

在我的第一部分我進口服務

import { TsService } from './ts.service';

，並把它添加到供應商

providers: [TsService]

，並在構造初始化

private tsService: TsService

，並單擊按鈕，我設置一個字符串以及

this.tService.setTs(form.value.member)

以我第二組分，接着我分配上述除了在構造相同的步驟如下

this.ts = tsService.getTs();

但它給我沒有定義。有什麼，我錯過了

來源

2017-05-16 Mujahid

我猜的形式有沒有價值，當你的構造運行 – Eeks33

它一個值，表單是第一頁，它從窗體中獲取一個值，當點擊按鈕時，我將該值設置爲服務，在下一個組件中，我得到值 – Mujahid

你可以包含更多的代碼嗎？或者做一個plunkr？有可能沒有足夠的地方來找到問題 – Eeks33

，我可以從你的代碼做出來。您已將您的服務註冊爲組件中的提供者。像

providers: [TsService]

這行代碼會做什麼。是否會在組件進場時立即獲取新服務實例？所以從第一個組件可以說ComponentA您設置服務變量

this.tService.setTs(form.value.member)

但這裏ComponentA是具有服務的假設Instnace1。所以您已將該值設置爲Service的Instance1。現在，您導航到第二部分說ComponentB只要ComponentB進場它的角創建服務的一個新實例，同樣是提供給ComponentB。現在有兩個服務實例ComponentA和一個ComponentB。但您已設置使用ComponentA的變量，因此它不會提供給ComponentB因此

this.ts = this.tsService.getTs();

這個返回undefined。

爲了檢查你的變量是否設置與否，你可以嘗試

this.tService.setTs(form.value.member); 
console.log(this.tsService.getTs());

在 ComponentA

它將記錄設置的值。

你的這個問題的解決方案是將共享相同的實例，並且可以通過註冊服務作爲AppModule提供商來實現。

官方文件說

，一方面，在NgModule提供商註冊根注射器。這意味着在整個應用程序中可以訪問在NgModule 中註冊的每個提供商。

欲瞭解更多請參考： -

Dependency Injection

NgModule Injectors

希望它能幫助:)

來源

2017-05-16 06:44:40 Manish

感謝Manish的建議，它工作，我錯過了它從開始 – Mujahid

歡迎:) – Manish

根據其中的東西執行的時候可能是

this.tService.setTs(form.value.member)

正在執行後

this.ts = tsService.getTs();

在這種情況下，行爲的順序預期。

至於如何處理這個問題。一種方法是爲組件訂購服務添加一種方法，並在ts發生更改時收到通知，以便他們可以通過執行某些代碼進行反應。看看RxJS' Subject。

不同的原因可能是您沒有正確提供服務。

例如，如果您將服務提供給父級和子級組件（直接與否）。在這種情況下，由於Angular的hierarchical dependency injection，第二個提供商可能會隱藏第一個提供商。這意味着一個組件將在服務的一個實例中設置該值，另一個組件從另一個組件獲取該值。除非您特別需要這種行爲，否則應僅在將使用組件樹的根部提供服務。

如果您的組件通過父子層次結構不相關，那麼您應該只提供一次服務。在模塊級別。

不知道更多關於您的組件結構，不可能知道究竟發生了什麼。

來源

2017-05-16 03:56:17 Rydion

看起來可能是這樣的，當我在它顯示的構造函數中設置一個隨機文本。我將嘗試使用RxJS – Mujahid

我已經編輯了答案，並鏈接到了Angular的文檔，他們討論了組件通信，特別是使用RxJS進行訂閱的組件通信。 – Rydion

我只是在想，爲什麼會出現這種情況，請檢查編輯後的答案。 – Rydion

您可能使用了兩個數據對象實例。使用一個數據服務進行設置並獲取數據。然後您可以訪問不同組件內的相同數據對象。

如果你設置的服務爲您的組件供應商單獨那些要去工作的不同實例。如果你只需要一個實例爲您的整個應用程序，你可以設置服務的提供商app.module.ts文件。

來源

2017-05-16 05:25:36

Angular 2服務獲取返回undefined

回答

相關問題