編集：これは、localstorageから値を取得する方法の複製ではありません。私の場合はまったく異なりました。実際、それはローカルストレージの問題ではなく、Angularの動作方法の問題でした。
私はAngular7アプリケーションに取り組んでいます。
トークンをlocalStorageに設定し、window.localStorage.setItem("oauth_token", oauth_token)ホームページにリダイレクトするコンポーネントがあります。this.router.navigate(['/'])
ルートコンポーネントはlocalStorageから読み取ることができるはずですwindow.localStorage.getItem("oauth_token")が、手動でページを更新しない限り、値はnullです。
Chrome開発ツールを調べると、ローカルストレージにトークンが表示されているのに、なぜページを更新する必要があるのですか？これを克服するために私は何ができますか？
ローカルストレージとは何の関係もありません。ルートコンポーネントには、ローカルストレージまたはデータの変更にアクセスするためのトリガーまたは更新が必要です。
ホームページにリダイレクトすると、ホームページコンポーネントからのコードのみが実行され、親またはルートコンポーネントからは実行されません。
サービスファイルで変数を宣言する必要があります。したがって、ローカルストレージを更新するたびに、サービスファイル変数の値を更新する必要があります。ルートコンポーネントでこの変数にアクセスできます。したがって、サービス変数に変更があると、トリガーが起動され、ローカルストレージを更新できます。サンプルコードのリンクを確認してくださいhttps://github.com/resistcheat/angular-variable-as-observable
サービスファイルを作成する
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class CommonService {
data: any;
private items: BehaviorSubject<any> = new BehaviorSubject<any>(this.data);
items$: Observable<any> = this.items.asObservable();
constructor(private http: HttpClient) { }
setLocalStorageData() {// Call this function to set localstorage
localStorage.setItem("oauth_token", oauth_token)
this.data = oauth_token;
}
}
//this.dataが変更されるとトリガーが起動されます。以下のコードをルートコンポーネントに追加します
constructor(private commonService: CommonService) { }
items: any;
subscription: Subscription; //import { Subscription } from 'rxjs';
ngOnInit() {
this.subscription = this.commonService.items$.subscribe(items => {
this.items = JSON.stringify(items));
console.log(localStorage.getItem("oauth_token"));
}
}
ngOnDestroy() {
this.subscription && this.subscription.unsubscribe();
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加