时间戳

首页 > 解决方案 > 重新加载组件以供第二次使用后无法重新订阅行为主题

angular - 重新加载组件以供第二次使用后无法重新订阅行为主题

问题描述

我读过你应该在删除组件时总是取消订阅。在我的情况下，当另一个子路由被激活并因此另一个子组件取代前一个组件时，就会发生这种情况。当我导航回第一个组件时，object unsubscribed即使我再次订阅行为主题，我也会收到错误消息。防止此错误的唯一方法是从 ngOnDestroy 中删除取消订阅代码，但随后行为主题永远不会被取消订阅。所以我比较困惑。我应该什么时候退订？如果不是在删除子组件时，那是什么时候？这是我的代码：

export class TemperatureSettingsComponent implements OnInit, OnDestroy {
  data: any;
  temperatureForm: FormGroup;
  monthlyTemperatureCurve: number[];
  saveToLocalStorage:BehaviorSubject<any[]> = this.seedCalendarService.getSaveBehaviorSubject();
  useImperialMeasureSystem: boolean = true;
  options = {
    responsive: false,
    maintainAspectRatio: false
  };
  constructor(private fb: FormBuilder,
  private seedCalendarService: SeedCalendarService,
  private notificationService: NotificationService,
  private dataStoreService: DataStoreService) {
    this.saveToLocalStorage.subscribe(pair => {
      if(pair[0] === DataType.MEASURE_SYSTEM_PREFERENCE){
          this.useImperialMeasureSystem = pair[1]; 
      }
    });
    this.temperatureForm = fb.group({
      'january' : [''],
      'february' : [''],
      'march' : [''],
      'april' : [''],
      'may' : [''],
      'june' : [''],
      'july' : [''],
      'august' : [''],
      'september' : [''],
      'october' : [''],
      'november' : [''],
      'december' : ['']
    });
  }

  ngOnDestroy(){
    this.saveToLocalStorage.unsubscribe();
  }

您可以清楚地看到我正在重新订阅构造函数中的behaviorsubjet toLocalStorage，但似乎只允许订阅和取消订阅子组件的第一个实例。正在加载的子组件的每个连续实例都无法重新订阅，我觉得这很令人困惑，因为它是一个新实例。请澄清一下，谢谢。

标签： angulartypescript

解决方案

如果您的子组件订阅了父组件中的 BehaviorSubject，那么一旦您离开父组件（也称为），它们就会丢失此订阅。当它被摧毁时。您的第一个孩子可能与您的父母在同一个 DOM 上，因此它不会受到影响，但您的第二个孩子可能不会受到影响，因此它无法访问此主题。

解决方案是将 BehaviorSubject 保留在服务中，并让您的父母/孩子订阅它。

推荐阅读