时间戳

首页 > 解决方案 > 传递这样的函数的好习惯？

html - 传递这样的函数的好习惯？

问题描述

我有以下场景，我在组件 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主题的服务，因为它是一个外部库。如果我在每个组件中都订阅它，并且每个组件都做它自己的事情，那么它会变得一团糟，并且我会遇到一个订阅在另一个之前完成的异步问题。

标签： htmlangulartypescriptrxjsobservable

解决方案

我可能会将外部库服务包装在“SharedService”中，并将“保存”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..
}

推荐阅读