“订阅”类型缺少“订阅”类型的以下属性：_parentOrParents、_subscriptions

Posted 2023-03-16

【中文标题】“订阅”类型缺少“订阅”类型的以下属性：_parentOrParents、_subscriptions

【英文标题】：Type 'Subscription' is missing the following properties from type 'Subscription': _parentOrParents, _subscriptions

【发布时间】：2022-01-03 18:25:33

【问题描述】：

我的 Angular ts 文件出现上述错误。但无法理解修复。谁来帮帮我

ts 文件：

import  Component, OnInit, OnDestroy  from '@angular/core';
import  ScullyRoute, ScullyRoutesService  from '@scullyio/ng-lib';
import  Subscription  from 'rxjs';

@Component(
  selector: 'app-articles',
  templateUrl: './articles.component.html',
  styleUrls: ['./articles.component.scss']
)
export class ArticlesComponent implements OnInit, OnDestroy 

  posts: ScullyRoute[] = [];
  private routeSub: Subscription | undefined;

  constructor(private scullyService: ScullyRoutesService)  

  ngOnInit(): void 
    this.routeSub = this.scullyService.available$.subscribe(posts => 
      this.posts = posts.filter(post => post.title);
    );
  

  ngOnDestroy(): void 
    this.routeSub?.unsubscribe();
  

【问题讨论】：

你能添加服务的定义，特别是available$。那是 Observable、BehaviorSubject、Subject...？

尝试用private routeSub!: Subscription;替换private routeSub: Subscription | undefined;

@Edward: scully.io/docs/Reference/ngLib/scully-routes-service

听起来你有多个版本的 RxJS。

据我了解，rxjs 7 与以前的版本相比有一些相当大的变化。我不认为 angular 12.x 支持 rxjs 7。here 上有一个线程。我知道 angular 13 确实支持它。如果您能够升级到 13，那将是最好的选择。如果您无法升级到 13，我建议将您的 scully 版本降级到支持 Angular 12 的版本。RXJS 是 Angular 的核心功能，因此在不支持它的 Angular 版本上盲目升级它会有风险

【参考方案1】：

也许 scully-route-service 使用了不同版本的 rxjs。作为一种解决方案，您可以使用 rxjs 管道运算符 takeUntil 和取消订阅的主题，而不是保存订阅的实例。示例代码下方：

onDestroy$: Subject<boolean> = new Subject();

ngOnInit() 
 this.scullyService.available$.pipe(takeUntil(this.destroy$)).subscribe(() => 
 //do stuff 
)
this.service.someSubscriber2.pipe(takeUntil(this.destroy$)).subscribe(() => 
 //do stuff 
)
this.service.someSubscriber3.pipe(takeUntil(this.destroy$)).subscribe(() => 
 //do stuff 
)


ngOnDestroy() 
  this.destroy$.next(true);
  this.destroy$.unsubscribe();

或者您可以通过升级到 Angular 13 来解决问题的核心，这将是最好的选择。如果您无法升级到 13，我建议将您的 scully 版本降级到支持 angular 12 的版本。

如果您不打算升级到 Angular 13，那么支持 rx 6 的 scully 的 LTS 版本是 1.1.4： https://registry.npmmirror.com/@scullyio/init/1.1.4?spm=a2c6h.24755359.0.0.60394d45aVQlxP&file=1.1.4

你可以通过运行npm install @scullyio/init@1.1.4来安装它