Angular 订阅已弃用

分享于2022年12月29日 angular rxjs typescript 问答
【问题标题】: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 = 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 ...

【解决方案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。更新。对我来说确实很愚蠢。