Wie verwendet man eine Wildcard für einen Teil des Pfades in Angular Router?

Question

Ich habe folgende Routing-Einstellungen.

const routes: Routes = [ 
    { path: "submenu1", component: SubmenuComponent, outlet: "menus" }, 
    { path: "submenu2", component: SubmenuComponent, outlet: "menus" }, 
    { path: "submenu3", component: SubmenuComponent, outlet: "menus" }, 
    ... 
]; 

Ich versuchte, das Wild Card ** zu verwenden, um alles passen mit Untermenü in der folgenden Art und Weise zu starten. Leider scheint ich auf diese Weise nichts zu erreichen und bekomme überhaupt kein Routing.

const routes: Routes = [ 
    { path: "submenu**", component: SubmenuComponent, outlet: "menus" }, 
    //{ path: "submenu1", component: SubmenuComponent, outlet: "menus" }, 
    //{ path: "submenu2", component: SubmenuComponent, outlet: "menus" }, 
    //{ path: "submenu3", component: SubmenuComponent, outlet: "menus" }, 
    ... 
]; 

Wie mache ich das?

Answer 1

Wie wäre es mit dem Folgenden?

const routes: Routes = [ 
    { path: "submenu1", component: SubmenuComponent, outlet: "menus" }, 
    { path: "submenu2", redirectTo: 'submenu'}, 
    { path: "submenu3", redirectTo: 'submenu'}, 
]; 

oder wenn es stört Sie nicht einen Router Hörer auf App-Komponente zu setzen:

ngOnInit() { 

     if (isPlatformBrowser) { 
      this.routerSubscription = this.router.events 
       .filter(event => event instanceof NavigationEnd) 
       .subscribe(() => { 
        if(this.router.url.startsWith('submenu'){ 
         this.router.navigate(['submenu1']); 
        }; 
       }); 
     } 
    } 

    ngOnDestroy() { 
     this.routerSubscription.unsubscribe(); 
    } 

Answer 2

Betrachten Sie die 1,2,3-Parameter anstelle eines Teils der Zeichenfolge Route machen: submenu/1, submenu/2 und so weiter. Auf diese Weise Konfiguration Ihre Route nur

{ path: "submenu/:id", component: SubmenuComponent, outlet: "menus" }, 

Hier sein kann, ist ein Beispiel für eine von mir:

RouterModule.forChild([ 
     { 
      path: 'messages/:id', 
      component: MessageComponent, 
      outlet: 'popup' 
     } 
    ]) 

Dann habe ich es auf diese Weise navigieren:

this.router.navigate([{outlets: { popup: ['messages', 7]}}]); 

Aber ein routerLink würde auch Arbeit.

Das Ergebnis ist: http://localhost:3000/welcome(popup:messages/7) in der Browser-Adressleiste.