typescript - วิธีการแสดงรายการ/แสดงผลเส้นทางทั้งหมดใน @Routes ในแอป Angular2 ของฉัน

ฉันมีคำถามสั้น ๆ ตอนนี้ฉันกำลังดู https://angular.io/docs/ts/latest/api/router/Router-class.html แต่ฉันสงสัยว่า ใน main.ts ของ Angular2 ของฉัน ฉันได้กำหนดเส้นทางของฉันดังนี้:

@Routes([
    { path: '/', component: HomeComponent },
    { path: '/about-me', component: AboutMeComponent },
    { path: '/food', component: FoodComponent },
    { path: '/photos', component: PhotosComponent },
    { path: '/technology', component: TechnologyComponent },
    { path: '/blog', component:Blogomponent },
])

ตอนนี้ในคอมโพเนนต์อื่น ๆ ฉันนำเข้าคลาส Router ในคอมโพเนนต์ของฉัน (หรือเทมเพลตของคอมโพเนนต์) ฉันอยากจะวนลูปผ่านเส้นทางทั้งหมดที่ฉันกำหนดไว้ หรือต้องการเพียงแค่สามารถเข้าถึงพวกมันได้ มีวิธีในตัวสำหรับทำสิ่งนี้หรือไม่? เช่น ฟังก์ชันบางอย่างที่คืนค่าอาร์เรย์ของวัตถุ? นี่คือแนวคิดคร่าว ๆ ของสิ่งที่ฉันต้องการ...

@Component({
    selector: 'ms-navigation',
    templateUrl: 'src/navigation/navigation.template.html',
    directives: [ ROUTER_DIRECTIVES ]
})

export class NavigationComponent {
    constructor(private router:Router) {   
        // what can I do here to get an array of all my routes?
        console.log(router.routes); ????
    }
}

คำตอบ #1

อัปเดต กรกฎาคม 2024: เนื่องจากคำตอบนี้มานานแล้ว ฉันยังไม่ได้ติดตามรุ่นใหม่ทั้งหมด มีคำตอบเพิ่มเติมจาก Adrian สำหรับรุ่นใหม่ที่มีการโหลดแบบ Lazy-loading กรุณาอ้างถึงคำตอบนั้นด้วยสำหรับรุ่นใหม่ของ Angular

นี่คือเวอร์ชันที่ดีกว่าซึ่งจะแสดง เส้นทาง ทั้งหมด ที่เป็นไปได้ (แก้ไขตามความคิดเห็น):

import { Router, Route } from "@angular/router";

constructor(private router: Router) { }

ngOnInit() {
  this.printpath('', this.router.config);
}

printpath(parent: string, config: Route[]) {
  for (let i = 0; i < config.length; i++) {
    const route = config[i];
    console.log(parent + '/' + route.path);
    if (route.children) {
      const currentPath = route.path ? `${parent}/${route.path}` : parent;
      this.printpath(currentPath, route.children);
    }
  }
}

คำตอบ #2

เห็นได้ชัดว่ามีวิธีที่กระชับมากในการทำสิ่งนี้:

constructor(private router: Router) {}

ngOnInit() {
  console.log('configured routes: ', this.router.config);
}

คำตอบ #3

ถ้าคุณต้องการเพียงเส้นทางของ route เป็นสตริง คุณสามารถหามันได้โดยการวนลูปผ่าน array config ของวัตถุ Router ของคุณ

    for (var i = 0; i < this.router.config.length; i++) {
        var routePath:string = this.router.config[i].path;
        console.log(routePath);
    }

คำตอบ #4

ฉันกำลังใช้คอมพิวเตอร์นี้เพื่อดึงเส้นทางทั้งหมดใน Angular 9

import { Compiler, Component, Injector, OnInit } from '@angular/core';
import { Route, Router } from '@angular/router';

@Component({
  templateUrl: './sitemap.component.html'
})
export class SiteMapComponent implements OnInit {

  public urls: string[] = [];
  constructor(private _router: Router, private compiler: Compiler, private injector: Injector) {

  }

  ngOnInit() {
    this._router.config.forEach(i => {
      this.getPaths(i);
    })
  }

  getPaths(route: Route, parent: string = '') {
    if (route.redirectTo) {
      return;
    }
    if (route.children) {
      route.children.forEach(i => {
        this.getPaths(i, parent + route.path);
      });
    }
    else if (route.loadChildren) {
      (<any>this._router).configLoader.load(this.injector, route).subscribe(i => {
        i.routes.forEach(j => {
          this.getPaths(j, parent + route.path)
        });
      });
    }
    else if (route.path != null) {
      this.setPath(route.path, parent);
    }
  }
  setPath(path, parent) {
    let fullPath: string;
    if (path != null) {
      if (parent) {
        fullPath = `/${parent}/${path}`;
      }
      else {
        fullPath = `/${path}`
      }
    }
    this.urls.push(fullPath)
  }
}

อัปเดต Angular 14: configLoader.load

(<any>this._router).configLoader.loadChildren

อัปเดต Angular 17: configLoader.loadChildren

(<any>this._router).navigationTransitions.configLoader.loadChildren