Mehrere Komponenten auf derselben Seite mit Singe-App in Angular2

Question

Wie Rendern eines Teils von HTML von Kind zu Eltern in Angular2. Die Idee besteht darin, ein Hauptlayout zu erstellen, und Abschnitte dieses Layouts werden von Kindern basierend auf den Anforderungen überschrieben (gefüllt). Ich habe aux versucht. Routen, aber ich konnte es nicht funktionieren lassen. PS: Ich möchte nicht, dass dieser Teil seine eigene Route hat, da es nur ein Teil der Seite ist. Neueste Angular2 bitte!

Zum Beispiel

<div class="layout"> 
    <div class="page-header"> 
     //Another router outlet here (How to render also this part for each child seperate) 
     //Some children will have custom page header 
    </div> 
    <div class="content"> 
     //content from child is rendered here 
     <router-outlet></router-outlet> 
    </div> 
</div> 

Answer 1

Da Sie dann nicht die spezifische Route für die einzelnen Vorlage möchten, können Sie dies wie folgt erreichen.

Angenommen, Sie laden die AppComponent auf.

app.component.html

<div class="layout"> 
    <div class="page-header"> 
     //Another router outlet here (How to render also this part for each child seperate) 
     //Some children will have custom page header 
     <router-outlet name='child1'></router-outlet> 
    </div> 
    <div class="content"> 
     //content from child is rendered here 
     <router-outlet name='child2'></router-outlet> 
    </div> 
</div> 

In Ihrem Router folgen.

{ 
    path: 'home', // you can keep it empty if you do not want /home 
    component: 'appComponent', 
    children: [ 
     { 
      path: '', 
      component: childOneComponent, 
      outlet: 'child1' 
     }, 
     { 
      path: '', 
      component: childTwoComponent, 
      outlet: 'child2' 
     } 
    ] 
} 

Nun, wenn/home wird appComponent mit zugeordneten Vorlage erhalten Last geladen wird, dann Winkel Router die Route überprüfen und die Kinder Komponente in bestimmten Router Steckdose auf der Basis des Namens laden.