我有一個帶有selectedLanguage變數的服務，但我得到了一個空值，而不是真實的值
。data: any = {};
selectedLanguage = 'en';
constructor(private http: HttpClient, private storage: Storage) {
}
async use(lang: string): Promise<{}> {
lang = lang ? lang : await this.storage.get('lang');
return new Promise<{}>((resolve) => {
const langPath = `assets/i18n/${lang || 'en'}.json`;
this.selectedLanguage = lang;
this.storage.set('lang', this.selectedLanguage);
this.http.get<{}>（langPath）.subscribe(
翻譯=> {
this.data = Object.assign({}, translation || {});
return resolve(this.data)。
},
() => {
this.data = {};
return resolve(this.data);
}
);
});
}
get(): string {
return this.selectedLanguage;
}
}
在component.ts檔案中，我使用了它，但不是以一種好的方式
export class LoginComponent implements OnInit {
imgError = false;
loginForm: FormGroup;
selectedLanguage: string;
建構式(
公共存盤。存盤器。
private translateService: TranslateService。
private alertController: AlertController。
私有翻譯。TranslatePipe
) { }
ngOnInit() {
this.selectedLanguage = this.translateService.selectedLanguage。
我如何將selectedLanguage作為一個觀察變數來使用，以便不得到一個空值？
uj5u.com熱心網友回復：
你可以創建一個新的Observable，其觀察者接收你的Promise的值。
const { Observable } = rxjs;>const Observable } = rxjs;
const promise$ = new Promise(span class="hljs-params">resolve => resolve('成功! '))
const observable$ = new Observable(observer => promise$。 then(value => observer.next（value）)
observable$.subscribe(console.log) <script src="https://cdnjs. cloudflare.com/ajax/libs/rxjs/6.5.3/rxjs.umd.min.js"></script>一步一步來：
Promise被創建，值Success！被直接resolved。同時，一個Observable被創建，observer-function的主體監聽Promise的值。
盡管Promise在創建Observable之前已經被設定并解決了，但為什么我們會得到一個value呢？
Promises不被同步處理。它們是microtasks。那些被處理在 makrotasks 之后。RxJS默認使用調度器來處理通過其管道/操作器/函式的每個值。默認的調度器（你可以在鏈接的底部閱讀）是一個asyncScheduler，它是內部某種setTimeout機制，因此是一個makrotask。
Sum:
Observable接收Promise的值，因為它在Promise值之前被處理。
這是一個復雜的話題。mikro-和markotask的內容與JavaScript Event Queue有關。這個youtube視頻向我解釋得非常清楚。
uj5u.com熱心網友回復：
只要宣告一個回傳可觀察的方法。在你的ngOnInit()中，呼叫這個方法，然后在Subscription中你可以得到這個值。一旦你的方法執行完畢，回傳可觀察的值。我已經給出了一個示例代碼。你可以查看這個鏈接來獲得更多資訊。
get(langObtained): Observable<String> {
let lang= langObtained;
return of(lang);
}
ngOninit(){
this.get('hi').subscribe( response=>{
//使用回應
});
}
uj5u.com熱心網友回復：
下面是一些如何用觀察變數設定語言的例子
setLang(lang: string): Observable<void> {
return fromPromise(this.storage.get('lang')).pipe(flatMap((lang) => {
const langPath = `assets/i18n/${lang || 'en'}.json`;
return this.http.get<{}>(langPath)
}), map(data => {
回傳 ... doSomeDataMapping
}), tap((result) => {
this.data = result;
this.selectedLanguage = lang
}))
}
tap部分只有在你真的需要有狀態的服務時才需要。
如果你需要選擇語言欄位的異步getter，你的tap將如下所示：
tap((result) => {
this.data$.next(result);
this.selectedLanguage$.next(lang)
})
而且你需要 :
private data$ = new BehaviorSubject（initialValue）。
private selectedLanguage$ = new BehaviorSubject(initialValue);
在頂部。
然后getters將是
getSelectedLanguage$(): Observable<string> {
return this.selectedLanguage$;
}
在組件中呼叫
this.selectedLanguage$ = this.translateService.getSelectedLanguage$()。
并在視圖中與async管道一起使用，例如
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/323558.html
標籤：