angular - Namngiven router-outlet visar ingenting

Jag arbetar för närvarande på ett Angular-projekt där jag behöver två routerutgångar, en är den primära utgången för att ladda huvudsidorna och dashbordsidan, och den andra som jag kallade "mainview" laddar komponenten som valts i sidofältet på dashbordsidan (för närvarande testar jag bara med URL).

Här är den routningsmodul jag skapade:

import { OrdersComponent } from './pages/orders/orders.component';
import { DashboardComponent } from './pages/dashboard/dashboard.component';
import { AuthentificationComponent } from './pages/authentification/authentification.component';
import { IndexComponent } from './pages/index/index.component';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {path: '', component: IndexComponent, pathMatch: 'full'},


  {path: 'login', component: AuthentificationComponent},
  {path: 'dashboard', component: DashboardComponent},
  {path: 'orders', component: OrdersComponent, outlet: 'mainview'},

  {path: '**', redirectTo: '', pathMatch: 'full'},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

och här är instrumentpanelsidan som laddar den sekundära utgången:

<mat-drawer-container class="example-container">
    <mat-drawer mode="side" opened>
        <app-sidebar></app-sidebar>
    </mat-drawer>
    <mat-drawer-content>
        <router-outlet name="mainview"></router-outlet>
    </mat-drawer-content>
</mat-drawer-container>  

jag försökte ladda orderkomponenterna på huvudsidan med denna URL:

http://localhost:4200/dashboard(mainview:orders)

Här är instrumentpanelsidan, det vita utrymmet är där innehållet från "mainview"-uttaget ska visas:

men det förblir tomt, kanske gör jag ett uppenbart misstag, men detta är första gången jag arbetar med namngivna routeruttag, vänligen låt mig veta hur jag kan få det sekundära uttaget "mainview" att visa orders-komponenten. Och tack

Svar #1

Om du laddar OrdersComponent inuti DashboardComponent så behöver du först ladda DashboardComponent och sedan OrdersComponent. Sättet du har satt upp det på skulle bara fungera om dashboard-uttaget och mainview-uttaget båda fanns i din toppnivåkomponent. För nästlade router-outlet använd children-egenskapen.

const routes: Routes = [
  {path: '', component: IndexComponent, pathMatch: 'full'},
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      {
        path: 'orders',
        component: OrdersComponent,
        outlet: 'mainview',
      },
    ],
  },
  {path: 'orders', component: OrdersComponent, outlet: 'mainview'},
  {path: '**', redirectTo: '', pathMatch: 'full'},
];

Du skulle navigera så här: http://localhost:4200/dashboard/(mainview:orders)

I det här fallet är utlopsnamnet onödigt eftersom det är den enda router-outlet i dashboard-komponenten.

Svar #2

för att få det att fungera behöver du använda routerLink-direktivet på länken i IndexComponent som du vill visa beställningarna genom att klicka på den.

<a [routerLink]="[{ outlets: { mainview: ['orders'] } }]"> orders </a>

om du vill visa det omedelbart när du navigerar till instrumentpanelen kan du lägga till följande rutt i routes-arrayen

    {path: 'dashboard', component: OrdersComponent, outlet:'mainview'}

detta kommer att göra OrdersCompont till höger om IndexComponet