จาวาสคริปต์ - Angular JS Angular 18 การกำหนดเส้นทางแบบไฮบริด

ฉันมีแอปพลิเคชันไฮบริด Angular JS/Angular 18 ที่กำลังทำงานอยู่ แต่สิ่งที่ฉันพยายามทำคือย้ายเส้นทางของผู้ใช้ลูกค้าแบบนี้:

.state('customer', {
                url: "/customer",
                abstract: true,
                template: "<app-side-menu></app-side-menu>",
                data: {
                    role: 2
                }
            })

และนี่คือวิธีที่ฉันกำหนดเส้นทางในคอมโพเนนต์เมนูด้านข้างของแอป:

import { Routes } from '@angular/router';
import { SideMenuComponent } from './customer/side-menu/side-menu.component';
import { HomeComponent } from './customer/home/home.component';

export const customerRoutes: Routes = [
  {
    path: 'customer',
    component: SideMenuComponent,
    children: [
      { path: 'home', component: HomeComponent },
      { path: '', redirectTo: 'home', pathMatch: 'full' }
    ]
  }
];

นี่คือโค้ด HTML ของคอมโพเนนต์:

<mat-sidenav-container>
    <mat-sidenav mode="side" [(opened)]="open">
      <!-- Aquí se muestra el menú -->
      <app-menu></app-menu>
    </mat-sidenav>
    <mat-sidenav-content>
      <app-header></app-header>
      <section id="content" [ngClass]="{'col-100': open, 'section': !open}">
        <router-outlet></router-outlet> <!-- Angular Router gestionará las rutas hijas -->
      </section>
      <app-footer></app-footer>
    </mat-sidenav-content>
  </mat-sidenav-container>

และนี่คือวิธีที่ฉันกำหนดส่วนประกอบเมนูด้านข้างของแอป:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatSidenavModule } from '@angular/material/sidenav';
import { RouterModule } from '@angular/router';
//header
import { HeaderComponent } from '../../layout/header/header.component';
// menu
import { MenuComponent } from '../../layout/menu/menu.component';
// footer
import { FooterComponent } from '../../layout/footer/footer.component';
import { CustomerRoutingModule } from './customer.routing.module';



@Component({
  selector: 'app-side-menu',
  standalone: true,
  imports: [HeaderComponent, MenuComponent, FooterComponent, MatSidenavModule, RouterModule, CustomerRoutingModule, CommonModule],
  templateUrl: './side-menu.component.html',
  styleUrl: './side-menu.component.less'
})
export class SideMenuComponent {
  open: boolean = false;
}

แต่ปัญหาคือไม่มีเส้นทางใดที่ถูกแสดงผลสำหรับลูกค้า ตัวอย่างเช่น หากฉันไปที่ customer/home คอมโพเนนต์โฮมควรถูกแสดงผล แต่กลับไม่เป็นเช่นนั้น

คำตอบ #1

ลองเพิ่ม <router-outlet><router-outlet/> ลงใน side-menu.component.html ของคุณ RouterOutlet ทำหน้าที่เป็นตัวแทนสำหรับคอมโพเนนต์ตามสถานะของ router ของคุณ ในกรณีของคุณ หลังจากเข้าสู่ url ...customer/home ควรจะแสดง HomeComponent.

คำตอบ #2

ปัญหาอาจอยู่ในอาเรย์ providers ของวัตถุ AppConfig ที่ถูกส่งไปยังเมธอด bootstrapApplication

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter([
      {
        path: 'customer',
        children: [
          { path: 'home', component: HomeComponent },
          { path: '', redirectTo: 'home', pathMatch: 'full' },
        ],
      },
    ]),
  ],
}).catch((err) => console.error(err));

ฉันพยายามจำลองปัญหาของคุณบน Stackblitz — ถ้าคุณเพิ่ม /customer/home เข้าไปใน URL ของเบราว์เซอร์ที่มีอยู่ใน StackBlitz, HomeComponent จะถูกแสดงขึ้น ฉันลบ path ของ customer เนื่องจากคุณกำลังใช้ abstract: true ในแอปพลิเคชัน AngularJS ของคุณ

หากคุณกำลังใช้ ngModules ให้ใช้สิ่งที่คล้ายกับนี้เพื่อกำหนดเส้นทางของคุณ:

const routes: Routes = [
...
  { path: 'customer', loadChildren: () => import('./customer/customer.module').then(m => m.CustomerModule) }, // Lazy loading modulu
...
];

และกำหนดเส้นทางของคุณในไฟล์ customer-routing.module.ts