Передача компонентов в Angular2

Question

Допустим, я хочу получить очень абстрактный и модульный, и я хочу передать компоненты в качестве входных данных для моих дочерних компонентов.

Возможно ли это?

Я понимаю, что я могу передавать входы и создавать компонент внутри, но иногда я хочу передавать разные/компоненты, иначе мне придется настраивать код для каждого компонента, и я не могу быть абстрактным о работе.

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

Теперь, если я хочу иметь C (два отдельных элемента), оберните вокруг двух разных компонентов, позвольте нам назвать их A & B. Я хочу, чтобы P смог передать их после их создания на C, чтобы сохранить абстрактное оформление, будучи способным просто использовать компоненты в качестве переменной внутри C.

Answer 1

Да, это возможно. Фактически, как состав для модульных компонентов работает в Angular2.

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

Вот это пример с ComponentFactoryResolver:

@Component({ 
    selector: 'my-dynamic-component', 
    template: 'this is a dynamic injected component !' 
}) 
export class MyDynamicComponent {} 


@Component({ 
    selector: 'wrapper', 
    template: ` 
    <div> 
    <p>Wrapper Component</p> 
    <template #dynamicComponent></template> 
    </div> 
    ` 
}) 
export class WrapperComponent { 
    @Input() contentComponent: any; 
    @ViewChild('dynamicComponent', { read: ViewContainerRef }) 

    dynamicComponent: any; 

    constructor(private componentResolver: ComponentFactoryResolver) {} 

    ngAfterViewInit():void { 
    const factory = this.componentResolver.resolveComponentFactory(this.contentComponent); 

    this.dynamicComponent.createComponent(factory); 
    } 
} 


@Component({ 
    selector: 'my-app', 
    template: ` 
    <wrapper [contentComponent]="MyDynamicComponent"></wrapper>` 
}) 
export class AppComponent { 
    MyDynamicComponent: any = MyDynamicComponent; 
} 

Вдохновленный из deprecated ComponentResolver answer
Другой способ сделать это можно найти answer HERE

Example PLUNKER