it-swarm.com.de

Angular 2 - Submodul-Routing und verschachtelter <Router-Ausgang>

Ich suche eine Lösung mit Angular 2 für das unten erläuterte Szenario:

enter image description here

In diesem Szenario enthält das Top-Nav Links zum Laden von Submodulen und das Sub-Nav Links zum Aktualisieren des Inhalts des Submoduls.

Die URLs sollten wie folgt aussehen:

  • / home => Lädt die Homepage in den Router-Ausgang der Hauptkomponente
  • / submodule => lädt das Submodul in den Router-Ausgang der Hauptkomponente und sollte standardmäßig die Startseite und die Navigationsleiste des Submoduls anzeigen
  • / submodule/feature => lädt das Feature in den Router-Ausgang des Submoduls

Das App-Modul (und die App-Komponente) enthält eine obere Navigationsleiste, mit der Sie zu verschiedenen Submodulen navigieren können. Die Vorlage für die App-Komponente könnte dann so aussehen

<top-navbar></top-navbar>
<router-outlet></router-outlet>

Aber hier ist die Komplexität. Ich benötige ein ähnliches Layout für meine Submodule mit einer Navigationsleiste der zweiten Ebene und einem eigenen Router-Ausgang, um ihre eigenen Komponenten zu laden.

<sub-navbar></sub-navbar>
<router-outlet name='sub'></router-outlet>

Ich habe alle Optionen ausprobiert und überall gesucht, konnte aber keine Lösung finden, um eine Standardvorlage (wie eine App-Komponente) im Submodul mit Router-Ausgang zu haben und auch den Inhalt des Submoduls in den inneren Router-Ausgang zu laden, ohne das Submodul zu verlieren .

Ich würde mich über Anregungen oder Ideen freuen

62
Ron F

Die HTML-Seite sieht dann so aus.

Hauptseite

<top-navbar></top-navbar>
<router-outlet></router-outlet>

Submodul-Seite

<sub-navbar></sub-navbar>
<router-outlet name='sub'></router-outlet>

wenn Sie in der oberen Navigationsleiste auf Navigation klicken, wird die Route des Hauptausgangs entsprechend weitergeleitet.

wenn Sie auf die Unter-Navigationsleiste klicken, wird der Router-Ausgang [Unter] entsprechend weitergeleitet.

HTML ist in Ordnung, der Trick kommt beim Schreiben von app.routing

app.routing.ts

const appRoutes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  { path: 'home',
    component: homeComponent,
    children: [
      {
        path: 'module1',
        component: module1Component,
        children: [
          {
            path: 'submodule11',
            component: submodule11Component,
          },
          {
            path: '',
            redirectTo: 'submodule11',
            pathMatch: 'full'
          }
        ]
      },
      {
        path: 'module2',
        component: module2omponent,
        children: [
          {
            path: 'submodule21',
            component: submodule21Component,
          },
          {
            path: '',
            redirectTo: 'submodule21',
            pathMatch: 'full'
          }
        ]
      }
    ]
  },
  {
    path: 'about',
    component: aboutComponent
  }
]

Hoffe es wird dir helfen.

Weitere Details https://angular.io/guide/router

38
Aswin KV

Verwenden:

RouterModule.forChild()
...
<router-outlet name="sub"></router-outlet>
...
[routerLink]="[{ outlets: { sub: [subRouteName] } }]"

Vollständiges Beispiel:

HTML

<div class="tabs tinyscroll">
  <button *ngFor="let tab of tabs"
  [routerLink]="[{ outlets: { sub: [tab.name] } }]"
  routerLinkActive="selected">
    <span>{{ tab.label }}</span>
  </button>
</div>

<section>
  <router-outlet name="sub"></router-outlet>
</section>

app.module.ts

imports: [
...
    RouterModule.forChild([
      {
        path: 'registers',
        component: RegistersComponent,
        children: [
          {path: 'vehicles', component: VehiclesComponent, outlet: 'sub'},
          {path: 'drivers', component: DriversComponent, outlet: 'sub'},
          {path: 'bases', component: BasesComponent, outlet: 'sub'},
          {path: 'lines', component: LinesComponent, outlet: 'sub'},
          {path: 'users', component: UsersComponent, outlet: 'sub'},
          {path: 'config', component: ConfigComponent, outlet: 'sub'},
          {path: 'companies', component: CompaniesComponent, outlet: 'sub'}
        ],
        canActivate: [AuthGuard]
      }
    ]),
...
15
thxmxx

sie müssen den Outlet-Namen in den Routen erwähnen. Geben Sie Ihren Router-Outlet-Namen im Routing wie folgt an: "outlet: 'sub"

routes: Routes = [
  {path:'', redirectTo: 'login', pathMatch: 'full'},
  {
    path: 'login',
    component: LoginComponent,
    
  },
  { path: 'home',
    component: AppComponent,
      children: [
        {path: 'home/pdf',component: SideMenuPage,outlet:"sub" },
        {path:'home/addFileUp',component:SidePageAdd,outlet:"sub"},
        ]},
 

];
        
0
Nambi N Rajan