如何使用多个组件/路由在 ngOnInit 上调用服务的方法

Question

我有几个路由只不过是一个静态页面。
在这些路由中的每一个（超过 50 个）上，当路由启动时，我必须在两个不同的服务上调用几个方法（以及更多）。
一个简单的工作解决方案是在每个页面上调用 ngOnInit 方法并调用上述方法。
问题是这意味着在 50 个不同的文件中复制和粘贴相同的代码。复制粘贴不好，不可维护。

举个例子：

我有页面“FAQ”（手动分配的 id：52）和页面“Find Us”（手动分配的 id：13）。这是2条不同的路线。
我有“编辑器”服务，用于从管理面板编辑这些页面，它需要跟踪我看到的页面。
我有“缓存”服务，它检查页面之前是否已经查询到后端，或者是否需要从服务器中提取。
这两个服务都想知道我手动分配给该路由的 ID。
此特定情况下的 ID 用于查询数据库/API，但是此详细信息不是以问题为中心的，不应使其他有类似问题的人的答案无效。

// Page FAQ
id: number
constructor() {
  this.id = 52; // 52 is the id that I assigned to the page FAQ
}
ngOnInit () {
  editorService.keepTrack(this.id);
  editorService.moreMethod().notMaintainable().whatIfIChangeSomething(this.id/0);
  cacheService.keepTrack(this.id);
}

// Page Find Us
id: number
constructor() {
  this.id = 13; // 13 is the id that I assigned to the page Find Us
} 
ngOnInit () {
  editorService.keepTrack(this.id);
  editorService.moreMethod().notMaintainable().whatIfIChangeSomething(this.id/0);
  cacheService.keepTrack(this.id);
}

现在，这是一个简化的例子，因为我认为没有必要用与手头问题无关的细节来重载问题。

我能想到的唯一解决方案是进行第三项服务。这将调用其他两个上的方法。
所以在每个页面中，我只需要在 ngOnInit 上调用这个单一的服务方法，并将关于如何调用其他两个服务的实现留给这第三个服务。
这将最大限度地减少复制和粘贴，并将实现保留在单个可维护文件中。

举个例子：

// Page FAQ v2
id: number
constructor() {
  this.id = 52;
}
ngOnInit() {
  inceptionService.doStuff(this.id);
}

// Page Find Us v2
id: number
constructor() {
  this.id = 13;
}
ngOnInit() {
  inceptionService.doStuff(this.id);
}

// InceptionService
export class InceptionService {
  doStuff(data) {
  editorService.keepTrack(data);
  editorService.moreMethod().notMaintainable().whatIfIChangeSomething(data/0);
  cacheService.keepTrack(data);
  }
}

问题是：
有没有更好的方法来做到这一点？我有一种感觉，我没有使用最好的方法来做这件事。
我仍然觉得我在滥用这些服务。

Answer 1

您可以为这些路由创建一个基类，并使您的组件从该基类继承。

export class BaseComponent {
    ngOnInit() {
        //your service calls
    }
}

export class MyStaticComponent1 extends BaseComponent {
    ngOnInit() {
        super.ngOnInit();
        //component specific calls
    }
}