RxJS Observable有时不会更新

Question

在尝试使用RxJS Observables实现Angular服务时，我遇到了一些我不理解的问题。

该服务的重要部分如下：

export class BreadcrumbsService{
  route: BreadcrumbsRoute[];

  …

  getRoute(): Observable<BreadcrumbsRoute[]> {
   return of(this.route);
  }


  pushRoute(newroute: BreadcrumbsRoute){
   this.route.push(newroute);
  }

  setRoute(newroute: BreadcrumbsRoute[]){
    this.route = [];
    for (const route of newroute) {
      this.route.push(route);
    }
  }

  …

}

Component正在按照您的预期订阅GetRoute方法：

ngOnInit() {
  this.service.getName().subscribe(name => this.servicename = name);
  this.service.getRoute().subscribe(newRoute => this.serviceRoute = newRoute);
}

我遇到了几个问题，既令人困惑又令人沮丧。没有特别的顺序：

• 根据代码所处的状态，ngOnInit()中的订阅有时可能会失败。

• 重新运行订阅（用户提示的poke()方法中的相同代码行）有时会导致订阅按预期运行，并更新链接的UI元素。

• 当路由订阅工作时，使用pushRoute()推送路径段（手动，通过UI）将导致路径UI正确更新。

• 即使路由订阅有效，使用setRoute()推送完整路由也无法更新UI。基础数据确实按预期发生了变化。

有人能说清楚我在这里缺少什么吗？

修改：Reproduced the issue on Stackblitz

重现的步骤：

• 在前两个文本框中输入值
• 点击Add to routes
• 路线显示按预期更新

• 在底部的两个框中输入/hello/world/
• 点击set new route
• 观察路线显示未按预期更新
• 点击Poke
• 路线显示更新