wake-up-neo.com

Router navigiert zur untergeordneten Route - Angular 6

Ich habe meine Routen folgendermaßen definiert:

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 {}

und so:

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 {}

Ich bin interessiert, wie ich mit der Router-Methode .navigate() in der Komponente oder routerLink in einem HTML-Element zu ListPage oder ProfilePage navigieren kann.

Ich habe so etwas versucht

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

oder

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

oder

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

und habe diesen Fehler bekommen:

Fehler: Es können keine Routen gefunden werden. URL-Segment: ''

angularangular6angular-routerangular-routerlink
7
Ante Ereš

Ich habe eine Lösung gefunden, indem ich den Profilpfad unter den Pfaden '' und 'tabs' hinzugefügt habe:

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

Jetzt kann ich mit zum Profil navigieren

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

Ich habe vergessen, diesen Pfad in tabs.router.module.ts hinzuzufügen. Aus diesem Grund wurde mir ein Fehler erwähnt

1
Ante Ereš

Wenn Sie zur Route list navigieren möchten, müssen Sie die angular wissen lassen, dass es sich um eine untergeordnete Route von tabs handelt

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

In der Routernavigation müssen Sie Routen als Array von string übergeben, sodass jetzt das angular für das übergeordnete tabs gefunden wird und die untergeordnete Route überprüft wird, falls dies der Fall ist nichts, was zu pathMatch: 'full' navigiert, wenn nicht, wird zu der bestimmten untergeordneten Route navigiert

In routerLink können Sie dasselbe Array verwenden, um die Route abzugleichen

Danke, viel Spaß beim Codieren !!

1
Rahul

Erwähnen Sie outlets im routerLink, während Sie zu einem bestimmten Ausgang navigieren.

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

was schließlich unterhalb der Route erzeugt

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

Dies hängt davon ab, von welcher Komponente aus Sie navigieren möchten.

Von Registerkarten zu ListPage:

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

Wenn Sie von ProfilePage zu ListPage (Geschwister) navigieren, müssen Sie Folgendes verwenden:

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

Im obigen Code ist route das ActivatedRoute-Objekt und ermöglicht daher die relative Navigation von der aktuellen Route. Sie können es wie folgt in den Konstruktor einfügen:

constructor(private route: ActivatedRoute)

Ich hatte auch einmal das gleiche Problem und habe alles versucht, aber nichts hat funktioniert. Am Ende hat mir Intellisense von Visual Studio Code dabei geholfen. Hoffe es hilft jemandem.

1
Sachin Parashar

Versuchen:

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

Dies löste mein Problem. Viel Spaß beim Codieren :)

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});

Versuchen Sie es mit jemandem, ich hoffe, dies wird Ihnen helfen.

0
shiva