Comment utiliser un joker pour une partie du chemin dans un routeur angulaire?

Question

J'ai la configuration de routage suivante.

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

J'ai essayé d'utiliser la carte sauvage ** tout correspondre à à partir avec sous-menu de la manière suivante. Malheureusement, je ne semble pas correspondre à rien de cette façon et ne pas avoir de routage du tout.

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" }, 
    ... 
]; 

Comment faire?

Answer 1

Que diriez-vous de ce qui suit?

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

ou si elle ne vous dérange pas de mettre un écouteur de routeur sur le composant d'application:

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

Pensez à faire les 1,2,3 paramètres au lieu d'une partie de la chaîne d'itinéraire: submenu/1, submenu/2 et ainsi de suite. De cette façon, la configuration de votre itinéraire peut être juste

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

Voici un exemple d'une de mes:

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

Je navigue à cette façon:

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

Mais routerLink serait travaille aussi.

Le résultat est: http://localhost:3000/welcome(popup:messages/7) dans la barre d'adresse du navigateur.