Question

在ngOnInit中，我订阅了一项服务，映射了一个对象，并在模板中呈现了该对象。

  ngOnInit() {
    this.id = +this.route.snapshot.paramMap.get('id');
    this.privateService.someService(this.id)
      .pipe(
        take(1)
      )
      .subscribe(
      (response) => {
        this.mapRes = response;
        }
      )
  }

当url参数中的id更改时，我正在基于新ID更改模板中的数据。我还使用rxjs take（）运算符来简化异步操作并减少延迟。但是，这种滞后仍在继续。从我更改url参数到使用新数据重新呈现模板的时间大约需要一秒钟。

ngDoCheck() {
   let tempId = +this.route.snapshot.paramMap.get('id');
    if(this.id === tempId) {
      return;
    }
    else {
      this.privateService.someService(this.id)
      .pipe(
        take(1)
      )
      .subscribe(
      (response) => {
        this.mapRes = response;
        }
      )
      this.id = tempId;
    }
  }

我认为这种滞后正在发生，因为我仍在ngOnIt中订阅了someService，然后又在ngDoCheck（）挂钩中重新订阅了该服务。

如何在不使用被销毁的组件的情况下取消取消服务（在这种情况下），以便可以重新渲染相同的组件但使用不同的数据？

编辑：我想知道我的问题是模板更改是否更改了实际的dom，这是滞后的源头而不是数据流吗？因为在触发ngDoCheck之后，我使用take（）运算符仅返回了1个对象，所以从理论上讲流就停止了

Answer 1

是的，在ngDoCheck中重新订阅可以创建许多订阅，并且根据一次在屏幕上显示该组件的实例数量而定，这个问题将会成倍增加。但是真正的问题是您每次ngDoCheck触发时都试图处理服务调用。如果您将console.count放在该回调中，我敢打赌您会看到该服务调用启动了许多请求。相反，在初始化时，您将需要通过订阅route.params或route.paramsMap或router.events来订阅路由更改。由于paramsMap是异步Observable，它可能会立即移至您的else块，并在每个doCheck上触发该请求。

角度6：基于URL参数更改组件的内容，内容更改滞后

1 个答案: