Angular: create已被弃用：请使用new Observable()

Question

我最近使用 ng update 更新了我的angular版本，当运行 ng lint 时，出现了错误：create is deprecated: use new Observable() instead

this.data$ = Observable.create(t => {
    t.next(this.model);
    t.complete();
});

新的可观察对象的语法是什么？

- mruanova

Answer 1

相当简单

this.data$ = new Observable((observer: Observer) => {
  observer.next();
  observer.complete();
});

更新的答案

this.data$ = new Observable<void>((observer) => {
  observer.next();
  observer.complete();
});

你可以将 void 替换为你的可观察对象应该发出的任何类型。观察者的 next 值类型将根据回调函数进行推断。

- Sergey

---

您也应该能够使用 of()。 - user10747134

@OneLunchMan 这两者不同。如果你使用 of()，它只会发出值。然而，of() 不如创建一个 Observable 强大。在那里，你可以放置复杂的逻辑。 - Sergey

明白了，所以需要更复杂的逻辑和不需要的区别在于…… - user10747134

@OneLunchMan 这并不简单 :). 当你使用of时，你正在生成.next的值，但如果你创建一个observable，你可以对事件做出反应，然后将一些数据传递给订阅者，以及你可以计算这些订阅者的数量等。 - Sergey

如果“Observer”给您带来了TS2314通用类型“Observer”的错误，请尝试将其替换为“any”或“Observer<any>”。 - beebus

Answer 2

在2021年，它发生了变化。

new Observable((observer: Observer<object>) => {
    observer.next(data);
}); 

代替

new Observable((observer: Observer) => {
    observer.next();
    observer.complete();
});

- Anik Saha

Answer 3

或者你可以只使用

this.data$ = of(this.model);

- Abel Valdez

Answer 4

observableSubscription: Subscription;

创建自定义可观察对象

const observer = new Observable((observer: Observer) => {
   observer.next();
   observer.error();
   observer.complete();
});

订阅自定义 Observable

this.observableSubscription = observer.subscribe((data:any) => {
   console.log(data);
})

取消订阅

this.observableSubscription.unsubscribe();

- Muhammad Bilal

---

对不起，我理解得对吗？Observable 是我们观察的对象。观察者（有时称为订阅者）是指监视我们的 Observable 并对其 next/error/complete 状态做出反应的东西。如果是这样，那么为什么您要创建一个名为 observer 的 const 变量，它返回一个新的 Observable。这会有点混乱逻辑。 - Anton

Answer 5

在NgOnInt中创建自定义可观察对象，可以像这样：

ngOnInit() {

const customObservable = new Observable((observer: Observer<object>){
  observer.next(this.modal);
  observer.complete();
})

订阅它

this.customSubscription = customObservable.subscribe((data) => {

  // logic goes here 
})

}

稍后，在ngOnDestroy中取消订阅

ngOnDestroy() {
    this.customSubscription.unsubscribe();
}

- Mohamud Abshir