元素隐式具有“任何”类型，因为“任何”类型的表达式不能用于索引类型，任何人都可以告诉我

Question

hello im doing dynamic component to gridster2 and i have a problem in "components[this.componentRef];"is show me this error:Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ example1: typeof Example1Component; example2: typeof Example2Component; }'

any help please

import { Directive, Input, OnChanges, ViewContainerRef, ComponentFactoryResolver, ComponentRef } from '@angular/core';

import {Example1Component} from '../../../Components/example1/example1.component';
import {Example2Component} from '../../../Components/example2/example2.component';
const components = {
  example1: Example1Component,
  example2: Example2Component
};
@Directive({
  selector: '[appLayoutItem]'
})
export class LayoutItemDirective implements OnChanges {
  @Input() componentRef!: any;
  component!: ComponentRef<any>;

  constructor(
    private container: ViewContainerRef,
    private resolver: ComponentFactoryResolver
  ) { }
  ngOnChanges(): void {
    const component = components[this.componentRef];

    if (component) {
      const factory = this.resolver.resolveComponentFactory<any>(component);
      this.component = this.container.createComponent(factory);
    }
  }
}

Answer 1

I'm not really sure what exactly you are tring to achieve, but to me it looks like it should be like this (I did not try this code due to the lack of further information).

const components = {
  example1: Example1Component,
  example2: Example2Component
}; 

@Input() componentRef!: 'example1' | 'example2'; // 
 component!: ComponentRef<Example1Component | Example2Component>;

Then this access should actually work:

 const component = components[this.componentRef];

You could consider using an Enum for 'example1' | 'example2' as well, that's what I personally like to do but it's personal preference.