Как передать компонент в другой компонент?

Question

[Coder321]

Как передать компонент в другой компонент в Angular 2 ?
То есть, можно ли во входящие параметры одного компонента передать другой и там его отрендерить, а если быть точнее, есть модальное окно, можно в него передать другой компонент? Суть в том что бы использовать один компонент модалки но внутриности передавать уже разные.

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();

Comments

[Coder321]

Спасибо, вродь то что нужно. Передаваемый компонент замещает родительский или вставляется в определенное место?

[_ _]

Coder321: вставляет во вью родительского компонента
посмотрите https://angular.io/docs/ts/latest/api/core/index/V...
Он вставляет в childNodes в позицию index или в конец, если не указано

[lega]

Фантастика, как простые вещи можно сделать на столько сложными...
В alight я просто взял компонент из атрибута и положил в шаблон: https://jsfiddle.net/lega911/pv0aysqc/

[_ _]

lega: не поспоришь

[Coder321]

lega: это да, чето гугл намудрил)

[Coder321]

Александр Марченко: Спасибо)

[Coder321]

Александр Марченко: чето ни чего у меня не получается или я что то не правильно понял( Я передаю класс компонента в другой откуда мне наперед знать все его зависимости?

[Coder321]

Александр Марченко: в последней строчке в instance нету componentRef

[_ _]

Coder321: наперед зависимости знать не надо, вы явным образом указываете только те, которые хотите переопределить. Остальные возьмутся из родительского DI-контейнера.
По последнему - сорри, componentRef не нужен, это и есть instance
instance.changeDetectorRef.detectChanges();

[Coder321]

Александр Марченко: Спасибо за ответ. Уже зделал, правда чуток по другому, всего в две строки делается) https://medium.com/@Carmichaelize/angular-2-compon...

Answer 2

[Pavel Shvedov]

нужно просто добавить его в declarations модуля, и он станет доступным для рендера из любого компонента этого модуля, или если хочется отрендерить в компоненте из другого модуля, то ваш модуль нужно заимпортить в целевой модуль, а компонент, который нужно отрендерить нужно добавить в exports вашего модуля

Comments

[Coder321]

Не, это не то, чуток подправил вопрос.