Компилировать угловой компонент из селектора

Question

У меня есть приложение, в котором есть много компонентов, которые представляют собой визуализации операторов RxJS, таких как rx-map, rx-filter, rx-reduce и т. Д. Визуализации работают сами по себе. Теперь я хотел бы позволить пользователю выбрать, какую визуализацию они хотят видеть через маршрутизатор. Я могу сделать это, создав маршрут для каждого отдельного компонента, но их много, так что будет много ручных маршрутов.

Я пытаюсь использовать Angular ComponentFactoryResolver для этого. Я могу заставить это работать так:

@Component({
  selector: 'rx-visualizations-app',
  template: '<ng-template #container></ng-template>',
})
export class RxVisualizationsAppComponent implements OnInit, OnDestroy {
  @ViewChild('container', { read: ViewContainerRef })
  container: ViewContainerRef;

  private componentRef: ComponentRef<{}>;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  ngOnInit() {
    const factory = this.componentFactoryResolver.resolveComponentFactory(
      getComponentFromRoute(),
    );
    this.componentRef = this.container.createComponent(factory);
  }
}

Это работает и правильно отображает компонент. Проблема в том, что мне нужно иметь полный список маршрутов компонентов к именам компонентов, а также импортировать каждый из них, например:

switch (route) {
  case 'map': return RxMapComponent

Несмотря на то, что это работает, на самом деле это не требует меньше усилий, чем просто создание маршрута для каждой отдельной визуализации.

Есть ли способ создать компонент из селектора или иным образом скомпилировать строку шаблона в приложении и внедрить ее?

Answer 1

Вы можете определить все свои компоненты Rx * в NgModule и динамически загрузить их с помощью ngContainerOutlet. Смотри документы здесь .

В простейшем случае:

<ng-container *ngComponentOutlet="RxMapComponent"></ng-container>

Вы также можете использовать ngComponentOutletNgModuleFactory с ngComponentOutlet, чтобы указать необязательную фабрику модулей, которая даст вам возможность динамически загружать другой модуль, а затем загружать компонент из этого модуля.

<ng-container *ngComponentOutlet="RxMapComponent;
                                  ngModuleFactory: myRxModule;"></ng-container> 

Чтобы это согласовать, вы можете заключить приведенный выше код в общий WidgetComponent:

<widget componentName="RxMapComponent"></widget>

Поскольку имя компонента является строкой, вам все равно необходимо сохранить соответствие имени компонента типу компонента (Тип ):

case 'RxMapComponent': return RxMapComponent

Основным преимуществом этого является то, что вам не нужно настраивать отдельные маршруты.