angular - 将异步可观察数据从父组件发送到子组件

Question

我正在尝试将异步数据(可观察数据)从父组件传递到子组件，但似乎更改没有在子组件上更新，我不确定为什么。

我有一个使用 BehaviourSubject 的(简化的)服务:

@Injectable()
export class MyService {

  private _items: BehaviorSubject<any[]> = new BehaviorSubject([]);
  public items: Observable<any[]> = this._items.asObservable();

  list() {
    this.http.get('...').subscribe(items => {
      this._items.next(items);
    })
  }
}

(list() 函数会定期从我的应用程序的其他地方调用以更新数据。)

然后我有一个父组件:

@Component({
  selector: 'parent',
  templateUrl: '<child [items]="myService.items | async"></child>',
})
export class Parent {

  constructor(public myService: MyService) {
  }
}

和一个 child :

@Component({
  selector: 'child',
  templateUrl: '<ul><li *ngFor="item of _items">{{item.name}}</li></ul>',
})
export class Parent implements OnChanges {

  @Input() items;
  _items = [];

  constructor() {
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log('changes', changes);
    this._items = changes.items;
  }
}

我的理解是，使用 async 会自动订阅/取消订阅我的 Observable，并将任何新数据传递到我的子组件。当新数据进来时，我的子组件应该在 ngOnChanges 中检测到这些变化并将它们打印出来。

1. 我的控制台输出从未触发，表明未在 child 身上检测到任何变化。我已经在我的父组件中手动订阅了 Observable 以验证新数据正在进来，所以我不确定我哪里出错了。
2. 在组件级别处理异步数据是否正确？

Answer 1

我可以建议您对代码进行一些更改:

家长:

@Component({
  selector: 'app-parent',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: '<app-child [items]="(myService.items | async)"></app-child>',
})
export class Parent {

  constructor(public myService: MyService) {
  }
}

- 在 [items] 分配中添加括号

child :

@Component({
  selector: 'app-child',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: '<ul><li *ngFor="item of _items">{{item.name}}</li></ul>',
})
export class Child implements OnChanges {

  @Input() items;
  _items = [];

  constructor() {
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log('changes', changes);
    console.log(this.items);
    this._items = changes.items;
  }
}

• 更改类(class)名称
• 添加了 changeDetection 策略
• 在选择器前加上 app 也是一个很好的做法