在Angular 7中,当使用Observable对象进行订阅时,可能会遇到一些奇怪的行为。以下是一些常见问题及其解决方法的示例代码。
import { Observable } from 'rxjs';
const myObservable = new Observable(observer => {
observer.next('Hello');
observer.next('World');
});
myObservable.subscribe(value => {
console.log(value); // 只有 'Hello' 被打印出来
});
myObservable.subscribe(value => {
console.log(value); // 这里将不会被执行
});
解决方法:使用Subject代替Observable。
import { Subject } from 'rxjs';
const mySubject = new Subject();
mySubject.next('Hello');
mySubject.next('World');
mySubject.subscribe(value => {
console.log(value); // 'Hello' 和 'World' 都会被打印出来
});
mySubject.subscribe(value => {
console.log(value); // 'Hello' 和 'World' 都会被打印出来
});
import { Observable } from 'rxjs';
const myObservable = new Observable(observer => {
observer.next('Hello');
observer.next('World');
});
myObservable.subscribe(value => {
console.log(value); // 'Hello' 和 'World' 都会被打印出来
});
myObservable.subscribe(value => {
console.log(value); // 这里将不会被执行
});
解决方法:使用BehaviorSubject代替Observable。
import { BehaviorSubject } from 'rxjs';
const myBehaviorSubject = new BehaviorSubject('Initial Value');
myBehaviorSubject.subscribe(value => {
console.log(value); // 'Initial Value' 会被打印出来
});
myBehaviorSubject.next('Hello');
myBehaviorSubject.next('World');
myBehaviorSubject.subscribe(value => {
console.log(value); // 'Hello' 和 'World' 都会被打印出来
});
import { Observable } from 'rxjs';
const myObservable = new Observable(observer => {
const intervalId = setInterval(() => {
observer.next('Hello');
}, 1000);
return () => {
clearInterval(intervalId);
};
});
const subscription = myObservable.subscribe(value => {
console.log(value); // 'Hello' 会每秒被打印一次
});
setTimeout(() => {
subscription.unsubscribe();
}, 5000);
解决方法:使用takeUntil操作符来指定取消订阅的条件。
import { Observable, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
const myObservable = new Observable(observer => {
const intervalId = setInterval(() => {
observer.next('Hello');
}, 1000);
return () => {
clearInterval(intervalId);
};
});
const unsubscribe$ = new Subject();
myObservable.pipe(takeUntil(unsubscribe$)).subscribe(value => {
console.log(value); // 'Hello' 会每秒被打印一次
});
setTimeout(() => {
unsubscribe$.next();
unsubscribe$.complete();
}, 5000);
以上是一些解决Angular 7中观察者订阅中奇怪行为的常见问题示例代码。根据具体情况,可能会有其他解决方法。