Question

我正在寻找一种方法来获取当前显示给用户的所有组件实例（如果可能的话，也可以获取所有服务实例）。

我曾考虑过使用ApplicationRef，但它仅提供了appComponent参考。

我也尝试过Injector，但是您必须显式地给该类以获取组件实例。

最后，我也尝试了Router，但没有成功。

有没有办法在Angular应用程序中获取所有组件实例？

我还应该声明所有组件都已路由，并且大多数组件都是延迟加载的。

编辑：用例

我正在尝试实现类似于Angular生命周期挂钩的事件管理器。这意味着我可以这样写我的组件

export class MyComponent implements EventManager {
  onCustomEvent(event) {...}
}

Answer 1

你的意思是这样吗？

    import { ....ComponentFactoryResolver } from '@angular/core';
export class Test{
      constructor(
        private resolver: ComponentFactoryResolver
      ) {
        const factories = Array.from(this.resolver['_factories'].keys());
        console.log(factories);
      }
}

Answer 2

我不知道angular本身是否可以帮助您解决这个问题。但是您可以通过创建一个名为“ SampleService”的服务来存储对创建的组件的引用来解决此问题。

这里有更多详细信息：

在您的组件中。

export class MyComponent implements OnInit , OnDestroy{

    constructor(private readonly sampleService:SampleService) {}

    ngOnInit(){
         this.sampleService.addRef(this);
    }

    ngOnDestroy(){
        this.sampleService.removeRef(this);
    }
}

Answer 3

好的，我终于找到了一种方法：装饰器。

这里是装饰器：

export function MsEvents(): ClassDecorator {

  const eventManager = AppModule.injector.get(EventManagerService);

  return function (instance) {
    eventManager.onCustomEvent().subscribe(arg => instance.prototype['onCustomEvent'](arg));
  };
}

使用此装饰器，我可以将定义的函数调用到我的组件中（在这种情况下为onCustomEvent）。所需要的只是

这个装饰器
组件将实现的接口

对应用模块中注入器的静态引用：

export class AppModule {
  static injector: Injector;
  constructor(injector: Injector) {
    AppModule.injector = injector;
  }
}

获取当前应用程序中的所有组件实例

编辑：用例

3 个答案: