Question

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

举个例子：

我有页面＆＃34; FAQ＆＃34; （手动分配的ID：52）和页面＆＃34;找到我们＆＃34; （手动分配id：13）。这些是两条不同的路线我有服务＆＃34;编辑器＆＃34;，用于从管理员面板编辑这些页面，它需要跟踪我看到的页面。
我有服务＆＃34; Cache＆＃34;，它检查页面是否已经被查询到后端，或者是否需要从服务器中取出。
这两项服务都想知道我手动分配给该路由的ID 此特定情况下的ID用于查询数据库/ API，但此详细信息不是以问题为中心的，并且不应使具有类似问题的其他人的答案无效。

const express = require('express');
const router = express.Router();

router.get('/users', function(req, res) {
//       return blizzard.wow.character(['profile'], { origin: 'us', realm: 'Myrealm', name: 'Mychar' })
//                 .then(response => res.json(response.data));

    setTimeout(function() {
      res.json({data: 'some data'})
    }, 2000);
});

module.exports = router;

现在，这是一个简化的示例，因为我没有看到需要使用与手头问题无关的详细信息来重载问题。

我能想到的唯一解决方案是提供第三项服务。这将调用另外两个方法。
因此，在每个页面中，我只需要在ngOnInit上调用此单一服务方法，并将实现有关如何将其他两个调用到第三个服务。
这样可以最大限度地减少复制和粘贴，并将实现保留在单个可归档文件中。

举个例子：

// 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);
}

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

Answer 1

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

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

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

Answer 2

您可以订阅路线事件并从那里调用您的方法。（见How to detect a route change in Angular 2?）

这也可以在服务中使用。

Answer 3

Michal Dymel的替代方案是有效的，并且会以比我的“InceptionService”更好的方法满足我的所有需求，但我觉得GünterZöchbauer的答案使用了更好，更易维护和更Angular的方法，尽管他的回答是不完整的。 /> GünterZöchbauer的回答也给了我输入，以找到Alex Rickabaugh @alxhub帮助我最终确定的其他解决方案。

这里我指的是angular-cli结构。

在app.component.html上替换
<router-outlet (activate)="newComponentActivated($event)">
与
newComponentActivated(component) { // Updating tracked page ID this.editorService.updateCurrentPage(component); }

在app.component.ts上

updateCurrentPage(component) {
  console.log(component);
}

在“编辑服务”中

{{1}}

现在每次路由更改时，事件都会通过组件的副本通知编辑器服务，包括参数和方法。
这意味着无需在路由组件中扩展或实现任何内容。

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

3 个答案: