TL，DR；我已经成功地将异步管道的输出传递到一个子组件中。但是当条件失败时（filter=

细节；

使用选择器，我订阅了@ngrx/store的两个切片：

export interface AppState {
  data: string[];
  pending: boolean;  // Are we waiting for a HTTP response?
  dirty: boolean;  // Has the data been edited locally?
}

…虽然上面有三个切片，但这个问题只涉及脏和数据。

减速机有三种情况：

• 应用程序操作。GET_NEW_DATA：
  • 设置待定为true以更新UI。
  • 导致HTTP请求（通过ngrx/effect）。
  • 设置待定为false以更新UI。
  • 将肮脏设置为false，因为没有进行任何编辑。
  • 更新有效负载中提供的数据。
  • 将肮脏设置为true，因为已经进行了编辑。

  代码：

  export function appReducer(state: AppState = initialState,
      action: AppActions.All
  ): AppState {
      switch (action.type) {
          case AppActions.GET_NEW_DATA:
              // Action results in HTTP request.
              return {
                  ...state,
                  pending: true
              };
          case AppActions.GET_NEW_DATA_SUCCESS:
              // HTTP response, update data!
              return {
                  data: action.payload,
                  pending: false,
                  pristine: true,
              };
          case AppActions.EDIT_DATA:
              return {
                  ...state,
                  data: action.payload,
                  pristine: false
              };
          default: {
            return state;
          }
       }
   }
  

  如前所述，使用选择器，我从智能组件中订阅了@ngrx/store的两个切片

  @Component({
    selector: 'app-smart',
    templateUrl: './smart.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush
  })
  export class SmartComponent {
  
    public data$: Observable<string[]>;
    public dirty$: Observable<boolean>;
  
    constructor(private readonly store: Store<AppState>) {
        this.data$ = this.store.select(fromReducer.getData);
        this.dirty$ = this.store.select(fromReducer.getDirty);
    }
  }
  

  智能组件使用异步管道来检测何时从可观察对象发出新值，并标记要检查更改的哑组件。

  <!-- From within <app-smart> -->
  <app-dumb [data]="data$|async"></app-dumb>
  

  这是按预期工作的，但是，我只希望更新，如果脏是假-即当一个新的HTTP请求和响应收到。

  我不想重新绘制

  创建时：

  • data$发出新值。
    • 脏$是false。
    • 标记<代码>

    编辑时：

    • data$发出新值。
      • 脏$是true。
      • 不要标记

      这看起来像是梳理可观察对象的一个主要案例：

      this.data$ = this.store
        .select(fromReducer.getData)
        .withLatestFrom(this.dirty$)
        .filter(([_, dirty]) => !dirty)
        .map(([tree, _]) => tree);
      

      …打破这个

      • this.store.select（fromReducer. getData）使用选择器从ngrx/store获取一个可观察对象。
      • 将新发出的数据$结果与来自脏$的最新结果相结合。
      • 过滤脏$是否为假。
        • 如果不是脏的，我们有来自服务器的新数据并想要更新

        问题是

        如果已进行编辑，则脏$为真。如果用户随后切换选项卡并随后返回，则过滤掉数据$，因为脏$是true：

        filter（（[_，脏]）=

        我已经成功将异步管道的输出传入子