Angular 订阅已弃用答案

【问题标题】：Angular subscribe is deprecatedAngular 订阅已弃用
【发布时间】：2022-12-22 03:33:22
【问题描述】：

我有角度问题。我是新手，正在按照此视频https://www.youtube.com/watch?v=dT1ID4q57fs&list=PLXKzVP4cRi8A4G6vnFB5bKpAStskhFwG0&index=3 中的指南进行操作在他添加订阅功能并添加响应和错误的 12 分钟左右，我的订阅功能被触发，例如：订阅

这是我的 home.component.ts 代码

import { Component } from '@angular/core';
import { map } from 'rxjs/operators';
import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
import { Observable } from 'rxjs'
import { CursorError } from '@angular/compiler/src/ml_parser/lexer';
import { AppService } from '../app.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
  /** Based on the screen size, switch from standard to one column per row */
  cards:any = [];
  cardsForHandset:any = [];
  cardsForWeb:any = [];

  isHandset: boolean = false;
  isHandsetObserver: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
    map(({ matches }) => {
      if (matches) {
        return true;
      }

      return false;
    })
  );

  constructor(private breakpointObserver: BreakpointObserver,
    public appService:AppService) {}

  ngOnInit(){
    this.isHandsetObserver.subscribe(currentObserverValue => {
      this.isHandset = currentObserverValue;
      this.loadCards();
    });

    this.appService.getDeals().subscribe(
      response => {
        this.cardsForHandset = response.handsetCards;
        this.cardsForWeb = response.webCards;
        this.loadCards();
      },
      error => {
        alert('There was an error in retrieving data from the server');
      }
    );
  }


  loadCards(){
    this.cards = this.isHandset? this.cardsForHandset:this.cardsForWeb;
  }

}

This is the message it shows

我看到一些解决方案说它是打字稿的版本，但改变那些并没有解决它。我在 Windows 上使用 vs 代码，但它适用于我使用 ubuntu 的朋友。这是我键入 ng --version 时的版本：

Angular CLI: 13.2.6
Node: 16.14.0
Package Manager: npm 8.3.1
OS: win32 x64

Angular: undefined
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1302.6 (cli-only)
@angular-devkit/core         13.2.6 (cli-only)
@angular-devkit/schematics   13.2.6 (cli-only)
@schematics/angular          13.2.6 (cli-only)
rxjs                         6.6.7
typescript                   4.6.2

任何解决方案都会有所帮助，谢谢！

【问题讨论】：

你查看deprecations页面了吗？他们在那里也给出了如何使用的例子？
不推荐使用超过 1 个参数的订阅的所有签名。有关详细信息，请参阅rxjs.dev/deprecations/subscribe-arguments
现在大多数情况下你必须做... .subscribe({ success: () => {...}, error: () => {...}, complete: () => {...}。而不是 3 个参数，现在你必须传递一个 object 最多有 3 个键（非正式说明），即 success、error 和 complete...

标签： angular typescript rxjs

【解决方案1】：

例如，在上述情况下，而不是写这个......

this.isHandsetObserver.subscribe(currentObserverValue => {
      this.isHandset = currentObserverValue;
      this.loadCards();
    });

    this.appService.getDeals().subscribe(
      response => {
        this.cardsForHandset = response.handsetCards;
        this.cardsForWeb = response.webCards;
        this.loadCards();
      },
      error => {
        alert('There was an error in retrieving data from the server');
      }
    );

我们会写...

this.isHandsetObserver.subscribe({
    next: (currentObserverValue) => {
        this.isHandset = currentObserverValue;
        this.loadCards();
    }
});

this.appService.getDeals().subscribe({
    next: (response) => {
        this.cardsForHandset = response.handsetCards;
        this.cardsForWeb = response.webCards;
        this.loadCards();
    },
    error: (error) => {
        alert('There was an error in retrieving data from the server');
    }
});

【讨论】：

这似乎对我不起作用，但我在 ubuntu 上写作的朋友向我发送了他的代码（与我的代码完全相同）并且它有效。唯一不同的是，他的 typescript 版本是 4.5.5。并且 Angular devkit 和原理图不仅仅是 cli（就像它们在我的构建中一样）。希望能帮助任何可能遇到与我相同问题的人。并感谢您的帮助 :)
Nalin 的通知和观察者的属性是next、error 和complete。因此，在您的回答中，您需要将观察者的属性success:更改为next:。
非常感谢@akotech。更新。对我来说确实很愚蠢。

【解决方案2】：

订阅错误处理程序有局限性，还有一些操作符可以让我们实现更高级的错误处理策略。

this.appService.getDeals()
        .pipe(
            catchError(err => of([]))
        )
        .subscribe({
            next: (response) => {
                this.cardsForHandset = response.handsetCards;
                this.cardsForWeb = response.webCards;
                this.loadCards();
            },
            error: (err) => {
                 alert('There was an error in retrieving data from the server');
            }
        });

参考包括here

【讨论】：