Angular 重新初始化组件后，角度订阅未定义

我有一个带有值选择选项的组件。 在初始化时，我在每个其他组件中订阅它的值。从第一次初始化开始，返回值，但在我更改组件并返回后，该值未定义。创建服务是为了将值设置为可观察值

@Injectable({
  providedIn: 'root',
})
export class LocationFilterService {

  private chooseLocations = new Subject<string[]>();

  chosenLocation$ = this.chooseLocations.asObservable();

  chosenLocations(locations: string[]): void {
    this.chooseLocations.next(locations);
  }
}

当我第一次在树中的任何其他组件中订阅它的值时，它工作得很好

export class ExampleComponent implements OnInit, OnDestroy {
     subscription: Subscription;
     chosenLocations: string[];

     constructor(
     private locationFilterService: LocationFilterService) {}

     ngOnInit(): void {
       this.subscription = this.locationFilterService.chosenLocation$.subscribe(
       (loc_id) => {
           this.chosenLocations = loc_id;
           this.doSomeStuff();
           //Do some API call with chosenLocations values. First time it works, but once I 
           //leave this component and return back then this.chosenLocations is undefined
  }
);

    ngOnDestroy(): void {
    this.subscription.unsubscribe(); 
    }
}

尽管在本例中我将默认值设置为['1']，但在销毁并再次初始化组件后，它将变得未定义。这个 LocationFilterComponent始终位于依赖此值的其他组件之上。目标是在此LocationFilterComponent下渲染的其他组件中维护此选择值。呈现的每个新组件都从LocationFilterService订阅和取消订阅。

---

这个问题的解决方案是什么？我在这个机制中遗漏了什么？角度版本10

这里的问题是您使用的是主题。 相反，您应该使用BehaviorSubject

行为主体持有一个值。订阅后，它会立即发出值。主体没有价值

主题示例（使用RxJS 5 API）：

行为主体示例：

const subject = new Rx.BehaviorSubject(0);
subject.next(1);
subject.subscribe(x => console.log(x));

Console output: 1


@Injectable({
  providedIn: 'root',
})
export class LocationFilterService {

  private chooseLocations = new BehaviorSubject<string[]>(null);

  chosenLocation$ = this.chooseLocations.asObservable();

  chosenLocations(locations: string[]): void {
    this.chooseLocations.next(locations);
  }
}

const subject=new Rx.behavior subject（0）；
主题。下一（1）；
subject.subscribe（x=>console.log（x））；
控制台输出：1
@注射的({
providedIn:'根'，
})
导出类LocationFilterService{
private-chooseLocations=new-BehaviorSubject（null）；
chosenLocation$=this.chooseLocations.asObservable（）；
chosenLocations（位置：字符串[]）：void{
this.chooseLocations.next（位置）；
}
}

这里的问题是您正在使用主题。 相反，您应该使用BehaviorSubject

行为主体持有一个值。订阅后，它会立即发出值。主体没有价值

主题示例（使用RxJS 5 API）：

行为主体示例：

const subject = new Rx.BehaviorSubject(0);
subject.next(1);
subject.subscribe(x => console.log(x));

Console output: 1


@Injectable({
  providedIn: 'root',
})
export class LocationFilterService {

  private chooseLocations = new BehaviorSubject<string[]>(null);

  chosenLocation$ = this.chooseLocations.asObservable();

  chosenLocations(locations: string[]): void {
    this.chooseLocations.next(locations);
  }
}

const subject=new Rx.behavior subject（0）；
主题。下一（1）；
subject.subscribe（x=>console.log（x））；
控制台输出：1
@注射的({
providedIn:'根'，
})
导出类LocationFilterService{
private-chooseLocations=new-BehaviorSubject（null）；
chosenLocation$=this.chooseLocations.asObservable（）；
chosenLocations（位置：字符串[]）：void{
this.chooseLocations.next（位置）；
}
}

您似乎需要将主题替换为Behavior Subject或ReplaySubject。然后在新订阅组件时，它将获得起始值。似乎您需要用BehaviorSubject或ReplaySubject替换主题。然后，在使用组件进行新订阅时，它将获得起始值。这是解决方案。我刚刚在我的环境中进行了测试，结果很好。谢谢你，德拉什蒂！很高兴我能帮上忙。这是解决办法。我刚刚在我的环境中进行了测试，结果很好。谢谢你，德拉什蒂！很高兴我能帮忙。

const subject = new Rx.Subject();
subject.next(1);
subject.subscribe(x => console.log(x));

Console output will be empty

const subject = new Rx.BehaviorSubject(0);
subject.next(1);
subject.subscribe(x => console.log(x));

Console output: 1


@Injectable({
  providedIn: 'root',
})
export class LocationFilterService {

  private chooseLocations = new BehaviorSubject<string[]>(null);

  chosenLocation$ = this.chooseLocations.asObservable();

  chosenLocations(locations: string[]): void {
    this.chooseLocations.next(locations);
  }
}