Angular 如何用外部化函数替换定义在map（）运算符中的箭头函数？

我还没有进入Angular和TypeScript，我对如何重构我的代码有以下疑问

在我的TypeScript组件类代码中，我有如下内容：

this.eventService.getEvents().subscribe(eventsSnaps => {
  this.events = eventsSnaps.map(currentEventSnap => {
    //console.log("DOCUMENT ID: ", currentCourseSnap.payload.doc.id);
    //console.log("DATA: ", currentCourseSnap.payload.doc.data());
    var currentEvent = {
      id: currentEventSnap.payload.doc.id,
      ...currentEventSnap.payload.doc.data()
    };

    var date = currentEventSnap.payload.doc.data().start.toDate()
    var hour = date.getHours();

    var startDateAsString = this.fromDateToString(date);

    console.log("startDateAsString: ", startDateAsString);
    console.log("hour: ", hour);

    currentEvent.start = startDateAsString;

    if(hour === 7) {
      currentEvent['backgroundColor'] = 'red';
    }
    else if(hour === 15) {
      currentEvent['backgroundColor'] = 'green';
    }
    else if(hour === 23) {
      currentEvent['backgroundColor'] = 'black';
    }

    return currentEvent;     
  });
  console.log("EVENTS FROM SNAPS: ", this.events);
});

该代码运行良好，基本上是订阅一个可观察的，其中包含从Firebase Firestore数据库检索到的数据，并对这些检索到的数据执行一些逻辑

我的问题是，在我的代码中，我需要执行多个订阅（到不同的服务方法），这些订阅执行map（）arrow函数中定义的完全相同的逻辑

我的想法是将所有这些逻辑具体化为一个函数，该函数将传递给代码中需要实现此行为的所有map（）函数。这可能是个好主意吗

---

在casi中，我不知道如何定义一个封装此逻辑的函数，并将其用作替换先前map（）中定义的箭头函数。

这是一个非常简单且不错的问题。您可以使用rxjs运算符执行此任务：

const eventSnaps$ = this.eventService.getEvents().pipe(
  map(events => events.map(currentEventSnap => {
    //console.log("DOCUMENT ID: ", currentCourseSnap.payload.doc.id);
    //console.log("DATA: ", currentCourseSnap.payload.doc.data());
    var currentEvent = {
      id: currentEventSnap.payload.doc.id,
      ...currentEventSnap.payload.doc.data()
    };

    var date = currentEventSnap.payload.doc.data().start.toDate()
    var hour = date.getHours();

    var startDateAsString = this.fromDateToString(date);

    console.log("startDateAsString: ", startDateAsString);
    console.log("hour: ", hour);

    currentEvent.start = startDateAsString;

    if(hour === 7) {
      currentEvent['backgroundColor'] = 'red';
    }
    else if(hour === 15) {
      currentEvent['backgroundColor'] = 'green';
    }
    else if(hour === 23) {
      currentEvent['backgroundColor'] = 'black';
    }

    return currentEvent;     
  })
)

eventSnaps$.subscribe(eventsSnaps => {
  this.events = eventsSnaps;
  console.log("EVENTS FROM SNAPS: ", this.events);
});

如果您提前一步，就可以进一步重构代码，并将rxjs映射移动到一个单独的函数中：

function mapEventsToEventsSnaps(events) => events.map(currentEventSnap => {
    //console.log("DOCUMENT ID: ", currentCourseSnap.payload.doc.id);
    //console.log("DATA: ", currentCourseSnap.payload.doc.data());
    var currentEvent = {
      id: currentEventSnap.payload.doc.id,
      ...currentEventSnap.payload.doc.data()
    };

    var date = currentEventSnap.payload.doc.data().start.toDate()
    var hour = date.getHours();

    var startDateAsString = this.fromDateToString(date);

    console.log("startDateAsString: ", startDateAsString);
    console.log("hour: ", hour);

    currentEvent.start = startDateAsString;

    if(hour === 7) {
      currentEvent['backgroundColor'] = 'red';
    }
    else if(hour === 15) {
      currentEvent['backgroundColor'] = 'green';
    }
    else if(hour === 23) {
      currentEvent['backgroundColor'] = 'black';
    }

    return currentEvent;     
  });

然后可以在管道中重复使用该函数。这使管道更具可读性，分离代码并使函数本身可测试：

const eventsSnaps$ = this.eventService.getEvents().pipe(
  map(events => mapEventsToEventsSnaps(events))
);

---

好的，但是我应该在哪里定义这个函数呢？（我指的是函数mapEventsToEventsSnaps（事件））。如果我将其作为TypeScript类的函数，IDE会给我以下错误：“意外的令牌。需要构造函数、方法、访问器或属性。”如果要在类中添加函数，则不能使用function关键字。如果要在纯.ts文件中保护此函数，请将其epxort到那里，并将其导入可以使用function关键字的任何位置。