Question

我有以下情况，在该事件中，我在组件A中订阅了主题（service.save），并且想调用组件B，C，D，E的某些功能。我想到了这样的东西：

//Component A only one subscribing
this.service.save.subscribe((event)=>{
    this.sharedService.beforeSaveFunctions.forEach(fn => {
        fn(event);
    });
    // ... do something
});


@Injectable()
export class SharedService{
  beforeSaveFunctions: any[];

  registerBeforeSaveFunction(fn:any){
      this.beforeSaveFunctions.push(fn);
  }
}


//Component B, C, D, ...
ngOnInit(): void {
    this.sharedService.registerBeforeSaveFunction(handleSave.bind(this));
}

handleSave(event){
    //Do something..
}

因此每个组件都可以调用this.sharedService.registerBeforeSaveFunction()来传递自己的函数，该函数稍后将在组件A中的订阅上执行。

这是好风格吗？我无法访问包含save主题的服务，因为它是一个外部库。如果我在每个组件中都订阅它，并且每个组件都是它自己做的，那么它就会变得混乱，并且在一个订阅完成之前会出现异步问题。

Answer 1

我可能将外部库服务包装在“ SharedService”中，然后将“ save” Observable公开为SharedService的成员，如下所示：

// Component A only one subscribing
this.sharedService.save.subscribe((event) => {
    // ... do something
});

@Injectable()
export class SharedService {
    save = this.service.save
        .pipe(
            tap(event => this.beforeSaveFunctions.forEach(fn => fn(event)))
        );

    constructor(private service: Service) { }

    beforeSaveFunctions: any[];

    registerBeforeSaveFunction(fn: any) {
        this.beforeSaveFunctions.push(fn);
    }
}

//Component B, C, D, ...
ngOnInit(): void {
    this.sharedService.registerBeforeSaveFunction(handleSave.bind(this));
}

handleSave(event){
    //Do something..
}

传递此类功能的好习惯？

1 个答案: