Angular 2: "全局"生命周期钩子？

Question

Angular 2: "全局"生命周期钩子？

6

TL;DR:

We want to create a "global" ngOnInit and ngOnDestroy function for our Angular 2 app. We need components to register and unregister with a global service, but we don't want to implement this logic in every component or a common base class. Instead, we propose using an interface that can be implemented by all necessary components. Then, we will register a global function which checks if the component implements the interface and calls the appropriate function to register/unregister it.

Detailed:

We are building an Angular 2 app and some of our components need to register with a global service on ngOnInit and unregister on ngOnDestroy. We don't want to implement this logic in every component, nor do we want to create a common base class that all classes must extend. Instead, we propose using an interface that can be implemented by all necessary components. Then, we will register a global function which checks if the component implements the interface and calls the appropriate function to register/unregister it.

The two approaches we considered were implementing the logic in every component or creating a common base class. However, these approaches have limitations. In the first approach, we would have to repeat the same logic in every component. In the second approach, all classes would have to extend the same base class, which is not ideal if they also need to extend other base classes.

Our proposed solution is to use an interface that can be implemented by all necessary components. We will then register a global function that checks if the component implements the interface and calls the appropriate function to register/unregister it. This approach avoids the limitations of the other two approaches and provides a more explicit implementation.

Our questions are: Can Angular 2 support this? Is this approach incorrect? Are there any better ideas?

- PzYon

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Estus Flask · Accepted Answer

强制整个应用程序的行为并不是一个好主意，这也会影响第三方组件。

样板代码可以移动到具体的基类中。有JS / TS多重继承的解决方案，例如@mixin，请参见TypeScript指南。

由于基类方法是固定的，因此类混合可以表示为简化的装饰器：

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等原型方法，箭头成员需要构造函数进行修补。