Créer un composant de façon dynamique tout en haut de la page

Question

Je voudrais instancier le composant en haut de la page ou dans l'élément body de la page. Si j'ajoute <new-element> en utilisant viewContainerRef de <person> composant par viewContainerRef.createComponent place l'élément nouvellement créé juste après son élément hôte.

<app>
    <persons>
        <person>host</person>
        <new-element>child</new-element>
    </persons>
</app>

Existe-t-il un moyen approprié de créer <new-element> juste après <app> de l'élément <person> composant.

<app>
    <new-element>child</new-element>
    <persons>
        <person>host</person>
    </persons>
</app>

Answer 1

S'il est possible de passer une cible ViewContainerRef dans votre person alors cela devrait fonctionner. Vous pouvez utiliser ng-container ce qui ne laisse aucun élément dans le DOM autre qu'un commentaire :

export class AppComponent {
    @ViewChild('target', { read: ViewContainerRef }) targetRef: ViewContainerRef;
}

<app>
    <ng-container #target></ng-container>
    <persons>
        <!-- Pass the target in -->
        <person [target]="targetRef">host</person>
    </persons>
</app>

Et puis dans votre person composante font :

@Input('target') target: ViewContainerRef;

// ...

this.target.createComponent( ... )

Edit : Puisque vous voulez utiliser un sélecteur comme cible de rendu, vous pouvez peut-être créer le composant, puis le déplacer :

viewContainerRef.createComponent( ... ) 

// The new component has been rendered as a sibling, so grab it and move it

document.querySelector('body').appendChild(viewContainerRef.element.nativeElement.nextSibling);