Angular2: insere um componente dinâmico como filho de um contêiner no DOM

Existe uma maneira de inserir dinamicamente um componente como umcriança (não um irmão) de uma tag DOM no Angular 2?

Existem muitos exemplos por aí para inserir um componente dinâmico como irmão de um determinadoViewContainerReftag, como (a partir de RC3):

@Component({
  selector: '...',
  template: '<div #placeholder></div>'
})
export class SomeComponent {
  @ViewChild('placeholder', {read: ViewContainerRef}) placeholder;

  constructor(private componentResolver: ComponentResolver) {}

  ngAfterViewInit() {
    this.componentResolver.resolveComponent(MyDynamicComponent).then((factory) => {
        this.componentRef = this.placeholder.createComponent(factory);
    });
  }
}

Mas isso gera um DOM semelhante a:

<div></div>
<my-dynamic-component></my-dynamic-component>

Resultado esperado:

<div>
    <my-dynamic-component></my-dynamic-component>
</div>

Usando oSomeComponentéViewContainerRef tem o mesmo resultado, ainda está inserindo o componente gerado como um irmão, não um filho. Eu ficaria bem com uma solução em que o modelo está vazio e componentes dinâmicos são inseridos no modelo (dentro da tag do seletor de componentes).

A estrutura DOM é muito importante ao usar bibliotecas como ng2-dragula para arrastar de uma lista de componentes dinâmicos ese beneficiar das atualizações do modelo. A div extra está na lista de elementos arrastáveis, mas fora do modelo, quebrando a lógica de arrastar e soltar.

Alguns dizem que não é possível (c.f. este comentário), mas parece uma limitação muito surpreendente.

questionAnswers(4)

yourAnswerToTheQuestion