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

【问题标题】：Type 'Subscription' is missing the following properties from type 'Subscription': _parentOrParents, _subscriptions“订阅”类型缺少“订阅”类型的以下属性：_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 版本上盲目升级它会有风险

标签： angular typescript typeerror angular-scully

【解决方案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来安装它

【讨论】：