web-dev-qa-db-fra.com

Le routeur navigue vers la route enfant - Angular 6

J'ai défini mes itinéraires comme ceci:

const routes: Routes = [
    { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
    { path: 'faq', loadChildren: './faq/faq.module#FaqPageModule' },
    { path: 'terms', loadChildren: './terms/terms.module#TermsPageModule' }
];
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {}

et comme ça:

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: '',
        redirectTo: '/tabs/(list:list)',
        pathMatch: 'full',
      },
      {
        path: 'list',
        outlet: 'list',
        component: ListPage
      },
      {
        path: 'profile',
        outlet: 'profile',
        component: ProfilePage,
        canActivate: [AuthGuardService]
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(list:list)',
    pathMatch: 'full'
  }
];

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

Je suis intéressé par la façon dont je peux naviguer vers ListPage ou ProfilePage en utilisant la méthode router .navigate() dans le composant ou routerLink dans un élément html.

J'ai essayé quelque chose comme ça

this.router.navigate(['tabs/profile']);

ou

this.router.navigate(['profile']);

ou

this.router.navigate(['tabs(profile:profile)']);

et a obtenu cette erreur:

Erreur: ne peut correspondre à aucun itinéraire. Segment URL: ''

angularangular6angular-routerangular-routerlink
7
Ante Ereš

J'ai trouvé la solution en ajoutant le chemin du profil sous le chemin "" et "onglets":

  {
    path: 'profile',
    redirectTo: '/tabs/(profile:profile)',
    pathMatch: 'full'
  }

Maintenant, je peux accéder au profil avec

  this.router.navigate(['profile']);

J'ai oublié d'ajouter ce chemin dans tabs.router.module.ts. À cause de cela, j'obtenais l'erreur mentionnée

1
Ante Ereš

Si vous souhaitez naviguer vers la route list, vous devez faire en sorte que le angular sache que c'est une route enfant de tabs

this.router.navigate(['/tabs/list']); ou this.router.navigate(['tabs','list']);

Dans la navigation par routeur, vous devez passer des routes sous forme de tableau de string alors maintenant le angular va trouver pour le parent tabs et vérifie la route enfant si elle est rien, il naviguera vers pathMatch: 'full' sinon, il naviguera vers l'itinéraire enfant spécifique

Dans routerLink, vous pouvez utiliser le même tableau pour faire correspondre l'itinéraire

Merci, codage heureux !!

1
Rahul

Mentionnez outlets dans le routerLink lorsque vous naviguez vers une sortie particulière.

[routerLink]="['tabs/profile', {outlets: {'profile': ['profile'], 'list': ['none']}}]"

qui générera finalement sous la route

http://localhost:4200/tabs/profile/(profile:profile//list:none)
1
Pankaj Parkar

Cela dépend du composant à partir duquel vous souhaitez naviguer.

Des onglets à ListPage:

this.router.navigate(['/list'], {relativeTo: this.route});

Si vous naviguez de ProfilePage vers ListPage (qui sont des frères et sœurs), vous devez utiliser ceci:

this.router.navigate(['../list'], {relativeTo: this.route});

Dans le code ci-dessus, l'itinéraire est l'objet ActivatedRoute et il activera donc la navigation relative à partir de l'itinéraire actuel. Vous pouvez l'injecter dans le constructeur comme ceci:

constructor(private route: ActivatedRoute)

J'étais également confronté au même problème une fois et j'ai tout essayé, mais rien n'a fonctionné. En fin de compte, Intellisense de Visual Studio Code m'a aidé avec cela. J'espère que ça aide quelqu'un.

1
Sachin Parashar

Essayer:

this.router.navigate(['child component path'], {relativeTo: this.activatedRoute});

Cela a résolu mon problème. Bon codage :)

0
shivam gaddh
this.router.navigate(['/list'], {relativeTo: this.route});
this.router.navigate(['./list'], {relativeTo: this.route});
this.router.navigate(['../list'], {relativeTo: this.route});
this.router.navigate(['../../list'], {relativeTo: this.route});
this.router.navigate(['tabs/list'], {relativeTo: this.route});
this.router.navigate(['/tabs/list'], {relativeTo: this.route});

Essayez n'importe qui, j'espère que cela vous aidera.

0
shiva