2017-11-24 13 views
0

私はlocalstorage状態を管理するために使用されるAngularでサービスを書いています。 A:Angular2で観測可能ないくつかの質問

この名localStorage.service.tsとproviders: [LocalStorageService]がapp.module.tsであるが

コードは、私が 例えば、他のコンポーネントでそれをサブスクライブするとき、しかし同じよう

observer: Observer<any>; 
observable: Observable<any>; 

setKey(key, item){ 
    localStorage.setItem(key, item); 
    observer.next("change"); 
} 
constructor(){ 
    this.observable = new Observable(obs => { 
     this.observer = obs; 
     window.addEventListener("storage", event => { obs.next("change") }); 
    }); 
} 

です

import { Storage } from "localStorage.service"; 

その後、

.component.ts私は申し訳ありませんが、あなたのコードを理解していない

の予想される出力

1 
2 
// route to other page and back 
1 
2 

実際の出力

2 
// route to other page and back 
2 
+0

を使用することができます。この問題で間違った何かが明らかにあると思う... '.subscribe(...)内のコード'でhappn必要がありますあなたが '2'をログに記録した場合は、' 1'も記録しなければなりません。あなたが出力として見た '2'は他のどこからも来ないと確信していますか? – olivarra1

答えて

0

。私はあなたが

あなたのサービス

observer: Subject<any>=new Subject<any>; //<--we create a Subject 
observable: this.observer.asObservable(); 

setKey(key, item){ 
    localStorage.setItem(key, item); 
    observer.next("change"); 
    //or observer.next(key); 
} 
constructor(){ 
    //nothing, it's not necesary windows.addEventListener 
} 

あなたのコンポーネント

constructor(private storage:Storage){} 
//In ngOnInit 
ngOnInit() 
{ 
    //we subscribe to observable 
    this.storage.observable.subscribe((data:any)=> 
    { 
     console.log(data) //output: "change" //or "test" 
     console.log("1"); 
     console.log("2"); 
    } 
    storage.setKey('test', 'test'); //<--call to setKey 
} 
関連する問題