BehaviorSubject 不发出值

Question

我在从父组件到子组件的 switchMap 运算符之后从行为主体发出值时遇到问题。如果我在子组件的 console.log 中调用真正的 http API 我只看到空数组 [] （默认值），但是在父组件的 tap 运算符中如果我 console.log 数据我看到数组20 个项目，但在子组件中没有。当我尝试制作模拟服务并 return 模拟数据时。

例如。 return of(['item1', 'item2']

这种情况下工作正常，但是当我只切换呼叫服务名称时，它对我来说不能正常工作，在点击时我看到数据，但在子输入中看不到。

import { Component, VERSION } from '@angular/core';
import { BehaviorSubject, Subject } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { AppserviceService } from './appservice.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;
  refresh$: Subject<void> = new Subject();
  data$: BehaviorSubject<string[]> = new BehaviorSubject<string[]>([]);

  constructor(private _appService: AppserviceService) {
    this.refresh$
      .pipe(switchMap(() => this._appService.test2()))
      .subscribe(res => {
        console.log('Subscribe:');
        console.log(res);
        this.data$.next(res)
      });

    this.refresh$.next();
  }
}

子组件

import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Component({
  selector: 'hello',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <h1>Hello {{ name }}!</h1>
  `,
  styles: [
    `
      h1 {
        font-family: Lato;
      }
    `
  ]
})
export class HelloComponent {
  @Input() name: string;
  @Input() set test(value: BehaviorSubject<any[]>) {
    console.log(value.getValue());
  }
}

https://stackblitz.com/edit/angular-ivy-7wezwh?file=src/app/app.component.ts

你遇到过这个问题吗？谢谢

Answer 1

原因是您的子组件在您的 http 调用完成之前被实例化了。现在您只是 getValue() 第一个值。如果您希望 BehaviorSubject 每次有数据时都发出新数据，您可以通过简单地添加异步运算符来解决此问题：

<hello name="{{ name }}" [test]="data$ | async"></hello>

@Input() set test(value: any[]) {
  console.log(value);
}

现在每次 BehaviorSubject 有一个新值时，它都会被发送到您的子组件

Fixed stackblitz

BehaviorSubject 不发出值

BehaviorSubject doesn't emit values

rxjs

typescript

angular

rxjs-observables