通过输入传递的不同对象引用不会触发纯管道

Question

TL:DR; - 新引用到达时不会触发纯管道，但应该触发。有什么想法吗？

我们不想使用 ngOnChanges 或 DoCheck，因为我们之前以一堆漂亮的 sphagetti 代码结束。我们的用例很简单，我们只是希望能够将数据传播到整个 DOM 树。

OnPush 无效，已经试过了

我们正在重构我们的 Angular 应用程序，由于事件（和更新数据的 websockets 事件）的复杂性增加，该应用程序变得足够大，可以有足够多的错误和问题。

所以我们决定为应用程序的每个主页创建一个数据服务。它将存储该页面的状态，并将成为处理任何子组件可能想要触发的任何事件以及来自连接的所有 websocket 事件的首选句柄

问题是，我们在数据传播方面遇到了很多问题。而且这是遗留代码，所以我们不想更改所有子组件，因此我们需要为子组件所需的输入进行数据转换。

我们已经知道 Angular 如何无法检测到对象内部的变化，但是很快就解决了这个问题，方法是（糟糕地）让我们的数据服务在每次更新时创建新的对象引用，所以我们不会Angular 没有检测到它们有任何问题

export interface ProjectData {
  list?: PageObject<Project>;
  active?: Project;
}

...
  private _state: ProjectData = {};
  private _stateSubject: BehaviorSubject<ProjectData> = new BehaviorSubject(this._state);
  public state$: Observable<ProjectData> = this._stateSubject.asObservable();
...

//We save the _state internally for checks on valid state updates (is the item active? is the item on the list?)
  requestList(options: QueryOptions) {
    this.projectService
      .list$(options)
      .pipe(
        map(page => {
          this._state.list = page;

          this._state = this.replicateState(this._state);

          return this._state;
        })
      )
      .subscribe(this._stateSubject);
  }

...
  // Use to force a new reference for the state object.
  // To be improved to actually make the logic work in an immutable way. For now, we want
  // to get this working, that's all.
  replicateState(oldState: ProjectData): ProjectData {
    return {
      list: oldState.list,
      active: oldState.active
    };
  }

然后，这个 state$ 由页面的主要组件（也称为父组件）检索。它会将其数据传递给每个子组件。为了这个问题，我们目前在 table 组件中遇到问题，该组件列出了分页的实体。

<sv-table-v2
  [listPage]="(data$ | async).list"
  [headers]="headers$ | async"
  ...other inputs
></sv-table-v2>

然后，这个 sv-table-v2 有一个呈现列表的组件。虽然来自旧版本，但我们不想继续重构，所以我们想从我们的页面转换为组件在 input

中使用的 Rowsclass

 <sv-table-list
    #rows
    [loaded]="listPage"
    [rows]="listPage.data | createRows: headers"
    ...other inputs
  ></sv-table-list>

我们必须创建一个纯管道，因为我们无法调用模板中的函数，除非它被无限调用。据推测，管道会缓存输入，并且只会在输入引用发生变化时重新触发。但是在本例中就是这样，是行不通的。

我们希望能够传播数据而不必深入研究 OnChanges 或 DoCheck。我们觉得它们很老套，除非你非常清楚如何处理它们，有一个复杂的案例要管理或有性能问题，除了传递输入 T_T 我们没有其他任何东西。我们之前也有一大堆 sphaguetti 代码，所以我们试图避免它，即使很多答案试图用那些生命周期方法来破解这类东西

实际上，我们只希望能够将更改从 DataService 传播到所有 DOM 树。就这些了。

我们已经尝试了 OnPush 策略而不是管道，但它也不起作用。而且，据我所知，我们仍然需要 Angular 来注意到引用确实发生了变化。

此外：如果我们不使用管道，所有这些都有效。数据不会显示在 table 上（因为类型不正确），但列表会根据我们请求的页面大小更新它的大小，因此我们知道数据可以正确传播。这就是为什么管道是我们的主要嫌疑人，是唯一的变化。

编辑：

管道的代码，我忘记了

import { Pipe, PipeTransform } from '@angular/core';
import { Resource } from 'src/app/core/models/resource';
import { ColumnHeader, Table } from 'src/app/core/models/table-data';

@Pipe({
  name: 'createRows'
})
export class CreateRowsPipe implements PipeTransform {
  transform(data: Resource[], headers: ColumnHeader[]): any {
    return new Table(data, headers).rows;
  }
}

Answer 1

所以，我们找到了解决方案，但我觉得它很老套，特别是因为这种做法是从 SO 中采用的，作为让主题订阅可观察对象以从中获取所有事件的正确方法。

所以：

  requestList(options: QueryOptions) {
    this.projectService
      .list$(options)
      .pipe(
        map(page => {
          this._state.list = page;

          this._state = this.replicateState(this._state);

          return this._state;
        })
      )
      .subscribe(this._stateSubject);
  }

每次调用方法和发出 HTTP 请求时都会调用此方法和管道，但订阅不会将新事件（HTTP 请求的结果）发送到 this._stateSubject在未知事件之后。就像 this._stateSubject 只是停止发送东西。

但是如果你有基本的方法，手动发送它（我以前在收到回复之前正在做的事情）

  requestList(options: QueryOptions) {
    this.projectService
      .list$(options)
      .pipe(
        map(page => {
          this._state.list = page;

          this._state = this.replicateState(this._state);

          return this._state;
        })
      )
      .subscribe(state => this._stateSubject.next(state));
  }

然后主题将永远不会停止工作，并将发送我们调用此函数时发出的任何新的 http 请求数据。

既然我正在写这篇文章，我认为问题可能在于，对具有整个可观察界面的主题的订阅可能会停止，因为 HTTP 请求发送了结束信号，所以对象也会在未知时间后结束。但这是我在写这篇文章时意识到的，我不确定这是否是核心问题。

TLDR：如果遇到问题，请将其与下一个一起发送。我不确定哪个是根本问题。

通过输入传递的不同对象引用不会触发纯管道

Different object reference passed through Input doesn't fire pure pipe

pipe

angular

angular-changedetection