小编Mar*_*ski的帖子

我在我的 angular 8 项目中有一个 observable，并且订阅了 ngOnInit()。

     export class ChartComponent implements OnInit {
       urlSubject: Subject<string> = new Subject();
       isLoading: BehaviorSubject<boolean> = new BehaviorSubject(false);
       chartData: BehaviorSubject<any[]> = new BehaviorSubject<any[]>([]);
       dataSubscription: Subscription;

       dataObservable: Observable<any> = this.urlSubject.pipe(
         switchMap((url: any) => this.httpClient.get<any[]>(url))
       )

       ngOnInit() {
         this.dataSubscription = this.dataObservable
          .pipe(tap(() => this.isLoading.next(true)))          
          .pipe(map((response: any) => response.result))      
          .subscribe((response: any) => this.chartData.next(response),
            () => this.isLoading.next(false),
            () => this.isLoading.next(false));

         this.urlSubject.next(this.data.settings.dataEndpoint)
      }
}

但是复杂的方法不会触发订阅。

我正在订阅chartData那种类型是BehaviourSubject. 所以我不订阅urlSubject。因为 url 可能会随时更改 searh 或 filter 参数。

我正在使用 finilize …

我读过一些关于 Observable 和取消订阅的文章。但是我对 pipe() 的一些信息不了解。在某些情况下，管道会自动取消订阅。这些案例是什么？我有一项服务用于连接到我的服务器和一个组件。我应该在这里取消订阅并使用 ngOnDestroy 吗？它为 CRUD 应用程序提供简单的服务。

例如，来自服务的一种方法：

public getSubject(size:number, page:number) : Observable<Subject[]> {
  return this.http.get<Subject[]>(environment.apiUrl + '/subject?size='+size+'&page='+page)
    .pipe(
      map(data=>{
        return  data;
      }),
      catchError(err => {
        return throwError(err);
      }));
}

和组件使用带有销毁器的服务。

    //...some code
pageClick() {
  this.subscriptions.add(this.connector.getSubject(this.pageSize, this.page - 1)
    .subscribe(data => {                                                                        
      this.subject = data;                                                                                  
      this.errorFlag = false;

    }, error => {                                                             
      this.error = error.error.message;                                                                                          
      this.errorFlag = true;

    }));
}
    //..some code..

@HostListener('window:beforeunload')
ngOnDestroy() {
  this.subscriptions.unsubscribe();
}