Angular2 동적 참조 및 작성 구성 요소

Question

예를 들어 하나의 구성 요소에 옵션 목록이 있습니다. 하나의 구성 요소를 클릭하면 사용자 선택에 따라 동적으로 구성 요소가 렌더링됩니다. 이것은 내가 이미지가 그것을 할 것이 방법입니다

목록 구성 요소

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'list-component', 
    templateUrl: ` 
     <ul> 
      <li *ngFor="let item from list" (click)="onClick(item)">{{item.name}}</li> 
     </ul> 
    ` 
}) 
export class ListComponent { 

    list = [ 
     {name: 'Component1'}, 
     {name: 'Component2'}, 
     {name: 'Component3'} 
    ] 

    constructor(private _listService: ListService) { 

    } 

    onClick(item) { 
     this._listService.renderComponent(item); 
    } 
} 

import { Component, ViewContainerRef } from '@angular/core'; 

@Component({ 
    selector: 'render-component', 
    templateUrl: ` 
     <div #dynamicComponent></div> 
    ` 
}) 
export class RenderComponent { 

    @ViewChild('dynamicComponent', { read: ViewContainerRef }) 
    private dynamicComponent: any; 

    constructor(
     private _listService: ListService, 
     private resolver: ComponentFactoryResolver 
    ) { 

     this._listService.onRenderComponent.subscribe(item => { 
      let componentReference; 

      //TODO: Get Component by reference ??? 

      let componentFactory = this.resolver.resolveComponentFactory(componentReference); 
      this.dynamicComponent.createComponent(componentFactory); 

     }) 
    } 
} 

나는 ListService에 대한 세부 사항을 왼쪽했지만 그것은 본질적으로 서비스 구성 요소를 렌더링 두 구성 요소가 통신 할 수 있습니다.

그래서 같은 ListComponent 내부 구성 요소에 대한 참조를하지 않으려는 것 :

import {Component1, Component2, Component3} from './otherComponents'; 

... 

list = [ 
    {name: 'Component1', component: Component1}, 
    {name: 'Component2', component: Component2}, 
    {name: 'Component3', component: Component3} 
] 

... 

this._listService.onRenderComponent.subscribe(item => { 
    let componentReference = item.component; 

    let componentFactory = this.resolver.resolveComponentFactory(componentReference); 
    this.dynamicComponent.createComponent(componentFactory); 

}) 

과 ListService 그것을 처리 할 수 ​​있습니다.

기본적으로 각은 selector, componentId 또는 그 라인의 어떤 참조와 같은 참조를 기반으로 구성 요소를 검색하는 방법을 제공합니까?

Answer 1

마지막으로 Angular 2.0을 사용하는 경우 (내가 생각하지 않는 것) 실제로 선택 도구를 통해 구성 요소를 해결할 수 있습니다.

const compFactory = this.factory.componentFactories.find(x => x.selector === 'my-component-selector'); 
    const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector); 
    const cmpRef = this.vcRef.createComponent(compFactory, this.vcRef.length, injector, []); 

는 I 동적 요소 생성 멀 예를 here