Angular 2, Routing, mehrere Master-Layout

Question

Ich habe eine Frage darüber, wie mehrere Master-Layout in angular2 haben.

zum Beispiel: meine Website 2 Abschnitte hat, zuerst das vordere Ende ist (., Welche Benutzer sehen können, es hat ein eigenes Master-Layout und seine URL ist http://mywebsite.com/..)

es auch einen Admin-Bereich hat (diese url verfügt über ein eigenes Layout und dessen ist http://mywebsite.com/admin/..)

die Frage ist nun, dass, wenn in app.ts Datei definiere ich die Routen und die Vorlage für die Seite wie:.

<div> 
    <router-outlet></router-outlet> 
</div> 

dann muss ich setze jedes Layout bezogene com ponenten in jeder weiteren Kind Komponente wie diese (http://mywebsite.com/products)

<my-nav></my-nav> 
<my-sidebar></my-sidebar> 
<div class="content"> 
    <!-- actual content of this component --> 
</div> 
<footer></footer> 

und wieder für http://mywebsite.com/customers, gleichen HTML-Markup.

dann wieder würde ich ein noch einmal

<my-admin-nav></my-admin-nav> 
... 

für die Admin-Layout benötigen.

so grundsätzlich meine Frage ist, wie kann ich das überkommen? oder wahrscheinlich denke ich total falsch, bitte führe mich in eine bessere Richtung.

dank

Answer 1

Es gibt mehrere Möglichkeiten, zwischen den Komponenten zu wechseln:

1) ngSwitch Verwenden Sie zwischen den <my-nav></my-nav> und <my-admin-nav></my-admin-nav> Komponenten zu wechseln. Docs: https://angular.io/docs/ts/latest/api/common/NgSwitch-directive.html

2) Verwenden Sie ViewContainerRef.createComponent()