Angular 2 : "Global" lifecycle hooks?

Question

长话短说

我们正在使用 Angular 2 构建一个应用程序，并希望注册一个“全局”ngOnInit 和 ngOnDestroy 函数。对于“全局”，我的意思是为每个组件执行该功能，而不需要为每个组件显式实现。这可能吗？

详细

我们的一些(但不是全部)组件需要在加载后在全局服务中注册一些东西(例如 ngOnInit)，并在卸载后再次取消注册(例如 ngOnDestroy )。以下是我能想到的两种方法:

• 在每个需要这样做的组件中实现此逻辑(在 ngOnInit 和 ngOnDestroy 中)。
• 在基类中实现此逻辑，该基类调用由指定需要注册/注销的子类实现的抽象方法。

这两种方法都不太令人满意:

• 首先，我需要一遍又一遍地实现整个逻辑。是的，我知道，我可以将“样板”代码放在辅助类或其他东西中。但它似乎有点含蓄，“隐藏”在常规的 Angular 生命周期中。有一个会说话的名字(例如接口(interface)/基类)似乎更明确。
• 在第二种情况下，所有类都需要扩展相同的公共(public)基类。但是，如果他们还应该扩展其他一些基类(多重继承)怎么办？

这就是为什么我想出了以下想法:

为什么不将上面提到的抽象类替换为可以由所有必需组件实现的接口(interface)。然后我会注册一个全局函数，该函数在所有组件的每个 ngOnInit 和 ngOnDestroy 上执行(如果可能 - 例如在模块、路由等中？)。在函数中，我将检查组件是否实现了接口(interface)，如果实现了，则调用适当的函数来获取要注册的特定类型的内容。

我的问题

• Angular 2 可以做到这一点吗？ IE。可以注册“全局生命周期 Hook ”(或类似的东西)吗？
• 或者这是一个完全错误的方法？
• 还有其他/更好的想法吗？

Answer 1

强制整个应用的行为不是一个好主意，这会影响第三方组件以及初学者。

样板代码可以移动到具体的基类中。有针对 JS/TS 多重继承的解决方案，例如@mixin ，另见 TypeScript guide .

由于基类方法是固定的，类mixin可以表示为一个简化的装饰器:

class CustomLifecycle implements OnInit, OnDestroy  {
  constructor(
    public originalNgOnInit: Function,
    public originalNgOnDestroy: Function
  ) {}

  ngOnInit() {
    ...
    if (typeof this.originalNgOnInit === 'function') {
      this.originalNgOnInit();
    }
  }

  ngOnDestroy() {
    ...
    if (typeof this.originalNgOnDestroy === 'function') {
      this.originalNgOnDestroy ();
    }
  }
}

function Lifecycled() {
  return function (target: Function) {
    const customLifecycle = new CustomLifecycle(
      target.prototype.ngOnInit,
      target.prototype.ngOnDestroy
    );

    target.prototype.ngOnInit = customLifecycle.ngOnInit;
    target.prototype.ngOnDestroy = customLifecycle.ngOnDestroy;
  }
}

它可以像这样使用

@Component({ ... })
@Lifecycled()
class SomeComponent { .... }

实现仅限于ngOnInit等原型(prototype)方法，箭头成员需要打补丁的构造函数。