使用全局注入器的Angular 7组件继承

Question

我一直在使用MSDN博客文章中描述的方法来简化扩展组件，而无需在super()调用中提供所有依赖项。然而，这在Angular 7和Typescript 3中已经停止工作。

所以现在发生的事情是，在引导之后，我试图将注入器存储在服务中，然后我试图检索它

platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
// Store module's injector in the AppInjector class
console.log('Expected #1: storing app injector');
AppInjector.setInjector(ref.injector);
})

然后在基本组件中，我获取存储的注射器

export class BaseComponent {
constructor() {
console.log('Expected #2: retrieving stored injector');
const injector = AppInjector.getInjector();
}
}

然而，从控制台上看，顺序是相反的——首先调用BaseComponent的构造函数，然后解析boostrapModule()的promise。

我不确定现在Angular 7中的引导行为是否有所不同，正如控制台日志所提示的那样。同样的解决方案也曾在Angular 6中使用Typescript 2，但在版本7中已停止工作。以下是基于MSDN文章的损坏应用程序的堆栈：https://stackblitz.com/edit/component-inheritance-angular-7

因此，根本问题是–如何保证AppInjector.setInjector()发生在AppInjector.getInjector()之前？

Answer 1

我已经在AppModule中设置了注入器服务，这意味着我将注入injector并将其设置在AppModule的constractor中，并将注入器的服务存储在全局对象中

export class AppModule { 
constructor(injector:Injector){
// Store module's injector in the AppInjector class
console.log('Expected #1: storing app injector');
AppInjector.setInjector(injector);
}
}

演示