How to pass a component to another component?

Question

Angular

How to pass a component to another component in Angular 2 ?
That is, is it possible to pass another component to the input parameters of one component and render it there, or to be more precise, there is a modal window, can another component be passed to it? The bottom line is to use one modal component, but the internals are already different.

Answer 1

// Инжектим в наш компонент-контейнер следующее
private _cfr: ComponentFactoryResolver,
private _vcr: ViewContainerRef

// Для создания компонента руками
// описываем переопределения зависимостей
// Компонент передан в переменной componentClass 
const componentProviders = ReflectiveInjector.resolve([
  { provide: Something, useValue: 1 }
]);

// Получаем фабрику из класса нашего компонента, который рендерим 
const componentFactory = this._cfr.resolveComponentFactory(componentClass);
// Создаем для него инжектор - используем .parentInjector или .injector нашего текущего компонента, исходя из того, какую иерархию DI нам нужно получить для создаваемого компонента
const childInjector = ReflectiveInjector.fromResolvedProviders(componentProviders, this._vcr.parentInjector);

// Фабрикой создаем экземпляр компонента
let instance = componentFactory.create(childInjector, []);
// Вставляем во view нашего компонента
this._vcr.insert(instance.hostView, this._vcr.length);
// Запускаем отслеживание изменений
instance.componentRef.changeDetectorRef.detectChanges();

Answer 2

you just need to add it to the declarations of the module, and it will become available for rendering from any component of this module, or if you want to render in a component from another module, then your module needs to be imported into the target module, and the component to be rendered needs to be added to the exports of your module