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>

转储组件需要使用@Input字段接收必要的所有信息吗？那么，我怎样才能将父observable发送到转储组件？这是对的吗？
转储组件是否可以构建其拥有的Observables并使用它们？
是否有使用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>

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

ngrx中的父组件和子组件

1 个答案: