Angular4 Material: Wie Inhalt zu laden, um sidenav

Question

So habe ich mein sidenav in app.component, so etwas wie:

<md-sidenav-container fullscreen> 
    <md-sidenav #sidepanel>...</md-sidenav> 
    <div class="app"> 
    <main> 
     <router-outlet></router-outlet> 
    </main> 
    </div> 
</md-sidenav-container> 

jetzt habe ich den Verweis auf die sidenav meine Site setzen, die alles mit Blick ist und ich bin in der Lage, es zu kontrollieren, wenn ich siteService injiziere.

würde Ich mag Inhalt laden innen on the fly (ähnlich welchem ​​Router-Ausgang funktioniert mit Router-naviagtion ...

sagen wir, ich möchte XyComponent1 oder XyComponent2 zum sidenav laden, wie würde ich dass programmatisch tut

Answer 1

Sie dies tun können eine Aux Route mit:

<md-sidenav-container fullscreen> 
    <md-sidenav> 
    <router-outlet name="sidenav"></router-outlet> 
    </md-sidenav> 
    <div class="app"> 
    <main> 
     <router-outlet></router-outlet> 
    </main> 
    </div> 
</md-sidenav-container> 

Und Sie können es steuern, indem die Ausgangsnamen vorbei:

<a [routerLink]="[{ outlets: { 'sidenav': ['sidenav-component1'] } }]"> 
    Click to apply new sidenav. 
</a> 

Sie müssen auch die Komponenten für die Routen definieren. This guide ist ein großartiger Auszug für mehr Details zur Verwendung von Aux-Routen.