ngrx中的父组件和子组件

Question

我正在尝试用几个转储子组件构建一个父组件。

我不太明白如何设计我的转储子组件。理论上，每个子组件必须使用@Input字段接收所有数据.所以：

@Component({
  selector: '[payment-list]',
  ...
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class PaymentList  {
  @Input() payments$: Observable<ISource>;

我试着使用这个输入字段来列出所有的付款都在付款中。这是我的IStore

export interface IStore {
  user: IUser;
  plans: IPlanRedux;
  sources: ISourceRedux;
  errors: IError;
}

export interface ISource {
    id: string;
    type: string;
    customer: string;
}

export interface ISourceRedux {
    byId: { [key: string]: ISource };
    allIds: Array<string>;
}

父组件使用以下方法生成一个Observable<ISource>：

private sources$: Observable<ISource>;

constructor(private store$: Store<IStore>) {
    this.sources$ = this.store$
        .select(fromRoot.getSourceEntities);
}

所以，进入我的parent.template.html

<div payment-list></div>

1. 转储组件需要使用@Input字段接收必需的所有信息吗？那么，如何才能将可观察到的父组件发送到转储组件？这是正确的吗？
2. 转储组件可以构建自己的Observables并使用它们吗？
3. 是否有使用ngrx处理此问题的最佳实践方法？

Answer 1

您的子组件不需要流，因为它只需要ISource对象来运行。

@Component({
  selector: '[payment-list]',
  ...
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class PaymentList  {
  @Input() payments: ISource;

private sources$: Observable<ISource>;
constructor(private store$: Store<IStore>) {
    this.sources$ = this.store$
        .select(fromRoot.getSourceEntities);
}

<payment-list payments="sources$ | async"></payment-list>

这种方法使您的子组件变得愚蠢，因为它不需要知道存储。