ngrx의 부모 및 자식 구성 요소

Question

덤프 된 하위 구성 요소가 여러 개인 상위 구성 요소를 빌드하려고합니다.

나는 어떻게 내 덤프 하위 구성 요소를 디자인하는지 잘 모르겠다. 이론적으로 각 하위 구성 요소는 @Input 필드를 사용하여 모든 데이터를 수신해야합니다. 따라서 :

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

이 입력란을 사용하여 얻으려고하는 것은 모든 지불금을 지불하는 것입니다. 이것은 내 IStore입니다 : 내 parent.template.html에, 그래서

private sources$: Observable<ISource>; 

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

:

<div payment-list></div> 

1. 버려진 구성 요소 모든 정보를 필요한 수신 할 필요가

   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>를 구축 @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> 

이 방법은 만드는 당신의 하위 구성 요소는 점을 인식 할 필요는 없습니다하는 방식에 바보