我正在使用ngrx / angular4开发一个应用程序 . 这里开发的设计模式似乎非常冗长,它与您如何订阅Store减速器有关 .
在组件中,以下情况并不罕见:
HOFDetails$:Observable<any>;
HOFDetails$SUB:ISubscription;
HOFMobile$:Observable<any>;
HOFMobile$SUB:ISubscription;
HOFMobile:any;
HOFHome$:Observable<any>;
HOFHome$SUB:ISubscription;
HOFHome:any;
SPDetails$:Observable<any>;
SPDetails$SUB:ISubscription;
SPMobile$:Observable<any>;
SPMobile$SUB:ISubscription;
SPMobile:any;
SPHome$:Observable<any>;
SPHome$SUB:ISubscription;
SPHome:any;
EmergencyDetails$:Observable<any>;
EmergencyDetails$SUB:ISubscription;
EmergencyDetails:any;
EmergencyMobile$:Observable<any>;
EmergencyMobile$SUB:ISubscription;
EmergencyMobile:any;
EmergencyHome$:Observable<any>;
EmergencyHome$SUB:ISubscription;
EmergencyHome:any;
EmergencyList$:Observable<any>;
EmergencyList$SUB:ISubscription;
EmergencyList:any;
countries$:Observable<any>;
countries$SUB:ISubscription;
countries:any;
valueIds$:Observable<any>;
valueIds$SUB:ISubscription;
valueIds:any;
lang$:Observable<any>;
lang$SUB:ISubscription;
//the subscriptions
this.lang$ = this.store.select(fromroot.getLanguage);
this.lang$SUB = this.lang$.subscribe((v:string)=>this.lang = v);
this.HOFDetails$ = this.store.select(from_costumer.getHOF);
this.HOFDetails$SUB = this.HOFDetails$.subscribe((v)=> {});
this.HOFMobile$ = this.store.select(from_costumer.getHOFMobile);
this.HOFMobile$SUB = this.HOFMobile$.subscribe((v)=> {});
this.HOFHome$ = this.store.select(from_costumer.getHOFHome);
this.HOFHome$SUB = this.HOFHome$.subscribe((v)=> {});
this.SPDetails$ = this.store.select(from_costumer.getSP);
this.SPDetails$SUB = this.SPDetails$.subscribe((v)=> {});
this.SPMobile$ = this.store.select(from_costumer.getSPMobile);
this.SPMobile$SUB = this.SPMobile$.subscribe((v)=> {});
this.SPHome$ = this.store.select(from_costumer.getSPHome);
this.SPHome$SUB = this.SPHome$.subscribe((v)=> {});
this.EmergencyDetails$ = this.store.select(from_costumer.getEmergency);
this.EmergencyDetails$SUB = this.EmergencyDetails$.subscribe((v)=>this.EmergencyDetails = v);
this.EmergencyList$ = this.store.select(from_costumer.getEmergencyList);
this.EmergencyList$SUB = this.EmergencyList$.subscribe((v:any)=> {});
this.EmergencyMobile$ = this.store.select(from_costumer.getEmergencyMobile);
this.EmergencyMobile$SUB = this.EmergencyMobile$.subscribe((v:any)=> {});
this.EmergencyHome$ = this.store.select(from_costumer.getEmergencyHome);
this.EmergencyHome$SUB = this.EmergencyHome$.subscribe((v:any)=> {});
this.countries$ = this.store.select(from_geo.getCountries);
this.countries$SUB = this.countries$.subscribe((v:any)=> this.countries = v);
this.valueIds$ = this.store.select(from_geo.getCountryIds);
this.valueIds$SUB = this.valueIds$.subscribe((v:any)=>this.valueIds = v);
所有这些代码仅用于 this this ,不包括订阅和取消订阅中的赋值逻辑 .
这在我看来是令人难以置信的重复和冗余 .
有没有办法把所有这些包装成一些可重复使用的包?也许基于组件或基于路由?
2 回答
删除订阅,删除解压缩的变量(例如
countries:any;
) . 你留下的只是Observables
. 将它们放在容器(智能)组件中,并使用async
管道将这些可观察对象绑定到您的(哑)表示组件 .例如:
在模板中:
然后
async
管道接管订阅,取消订阅并将实际值分配给实际使用它们的子组件 .在容器组件中缩短它:
您可能不需要设置本地prop
this.lang
,只需将observable传递给任何表示组件并使用异步管道 .