app.component.ts
import { Component, OnInit } from '@angular/core';
import { of } from 'rxjs';
import { TestService } from './test.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
posts = [
{ id: 1, name: 'chethan' },
{ id: 2, name: 'rohan' },
{ id: 3, name: 'sai' },
{ id: 4, name: 'yashas' },
];
constructor(private readonly testService: TestService) {}
getPosts() {
return of(this.posts);
}
ngOnInit(): void {
this.testService.myData$.subscribe((data) => {
console.log('from mydata');
console.log(data);
});
// this.testService.mysecondData$.subscribe((data) => {
// console.log('from secondata');
// console.log(data);
// });
this.testService.refresh();
this.testService.emitProduct(3);
}
}
測驗服務.ts
import { Injectable } from '@angular/core';
import {
BehaviorSubject,
map,
Subject,
switchMap,
switchMapTo,
tap,
} from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class TestService {
private refreshSubject = new Subject<void>();
refresh$ = this.refreshSubject.asObservable();
private productSubject = new BehaviorSubject<number>(1);
product$ = this.refreshSubject.asObservable();
mysecondData$ = this.product$.pipe(
tap(() => console.log('coming to mysecondata')),
map(() => 5)
);
myData$ = this.refresh$.pipe(
tap(() => console.log('myData before switchmap got refresh pipe')),
switchMap(() => this.mysecondData$),
tap(() => console.log('myData after switchmap bypassed refresh pipe'))
);
emitProduct(data: number) {
this.productSubject.next(data);
}
refresh() {
this.refreshSubject.next();
}
}
當我檢查輸出時,我無法獲得產品 $ 的排放
我知道重繪 會觸發,然后它應該切換到發出 5 但我沒有看到該輸出的 product$,即使我使用了行為主題,它也沒有發出值?
即使我從 ngoni 訂閱 this.testService.product$ 也沒有得到任何資料,呼叫 productSubject 的 next() 方法后的事件,為什么會這樣?
uj5u.com熱心網友回復:
根據您剛剛粘貼的代碼,原因很可能是因為product$是派生refreshSubject 而不是productSubject.
因此,您productSubject向
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/514950.html
標籤:有角度的打字稿rxjs
上一篇:即使使用警衛檢查,物件也可能為空
下一篇:基于鍵名的物件屬性的窄型別
