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

问题描述

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

我们不想使用ngOnChanges或DoCheck，因为我们之前以一团漂亮的斯法盖蒂代码结尾。我们的用例非常简单，我们只希望能够将数据传播到整个DOM树。

OnPush无法正常运行，已经尝试了

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

因此，我们决定为该应用程序的每个主页创建一个数据服务。它会存储该页面的状态，并成为处理任何子组件可能希望触发的任何事件以及来自连接的所有websocket事件的必经处理

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

我们已经知道Angular如何无法检测到对象内部的变化，但是很快（通过）使dataService在每次更新中创建新的对象引用，这一点很快得到了解决，因此我们将没有任何种类的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
    };
  }

然后，该状态$由页面的主要组件（也称为父组件）检索。它将其数据传递给每个子组件。为了解决这个问题，我们目前在使用表格组件时遇到问题，该组件列出了已分页的实体。

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

然后，此sv-table-v2具有呈现列表的组件。尽管是旧版本，并且我们不想继续进行重构，所以我们想从页面到组件在输入中使用的Rows类进行转换

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

我们必须创建一个纯管道，因为如果不将其称为ad infinitum，就无法在模板中调用该函数。据说，管道会缓存输入，并且仅在输入引用发生更改时才会重新触发。但这是这种情况，无法正常工作。

我们希望能够传播数据而不必深入研究OnChanges或DoCheck。除非您非常了解如何处理它们，处理复杂的案例或遇到性能问题，否则我们会感到它们很笨拙，除了传递输入T_T之外，我们没有其他条件。之前，我们还加载了全部的sphaguetti代码，因此，即使有很多答案尝试使用这些生命周期方法来破解此类内容，我们也试图避免这种情况

真的，我们只希望能够将更改从DataService传播到所有DOM树。就是这样。

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

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

编辑：

我忘记的管道代码

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;
  }
}

解决方法

因此，我们找到了解决方案的方法，但是我感到它很棘手，特别是因为这种做法是从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 。就像这样。_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请求发送End信号而停止，因此该主题也在未知的时间后结束。但这是我在撰写本文时意识到的，我不确定这是否是核心问题。

TLDR：如果遇到问题，请仅与next一起发送。我不确定哪个是潜在的问题。

angular angular-changedetection