scharfkantiges Material SideNav Inhalt Strategie

Question

Ich habe einen Standard sidenav Layout entlang der Linien dieser

<mat-sidenav-container> 

    <mat-toolbar></mat-toolbar> 

    <router-outlet></router-outlet> 

    <mat-sidenav></mat-sidenav> 
    <mat-sidenav position="end"></mat-sidenav> 

</mat-sidenav-container> 

ich das zweite sidenav als Content-Bereich verwendet werden soll.

Bei diesem Projekt sind alle aktiven Routen einfach Komponenten mit einem Canvas-Bereich und einige grundlegende Informationen über das "Experiment". Vielleicht ein paar grundlegende Schieberegler oder Steuerelemente.

Grundsätzlich möchte ich das Content-Div in den zweiten Sitenav-Container gehen. Nur der Canvas ist visuell ein Kind der tatsächlichen Komponente.

Dies scheint verrückt, ich glaube nicht, dass ein Kind auf diese Weise erreichen sollte und abhängig von einer Elternstruktur. Ich verstehe das. Die Umkehrung, dass die Komponente ein Sitenav hinzufügen würde, wäre viel besser, aber das Sitenav muss zu einem Sitenav-Container gehören und liegt somit immer noch außerhalb der Grenzen der Komponente.

Also, was ist die beste Strategie stattdessen? Ich kann meinen Kopf nicht um mich herum drehen. Würden Sie das als 2 Komponenten sehen, die 2 äußere Anschlüsse benötigen und einen gemeinsamen Dienst benötigen, damit sie miteinander sprechen können? Gibt es einen besseren Weg?

Answer 1

Wenn ich das richtig verstanden:

1. Nur die "Leinwand" sidenav die <router-outlet> haben sollte.
2. Wenn das Sitenav "Canvas" von einer anderen Komponente für seine Daten abhängt, müssen Sie diese Logik in einen separaten Dienst extrahieren. Auf diese Weise kann Ihr Sitenav "Canvas" unabhängig davon seine Daten erhalten.
3. Wenn Sie noch 2 verschiedene Steckdosen in Ihrer Vorlage benötigen, sollten Sie aux routing verwenden, ABER - wenn Ihr Hauptinhaltsbereich (die Homepage) statisch ist - Sie brauchen keine Route, um sie anzuzeigen, verwenden Sie einfach die "Home" -Komponente in Ihrer Vorlage und halten Sie die <router-outlet> nur in Ihrem "Leinwand" sidenav

hoffe, das hilft!