Маршрутизатор перейдет к дочернему маршруту - Angular 6

Question

Я определил свои маршруты так:

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

и вот так:

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

Мне интересно, как я могу перейти к ListPage или ProfilePage, используя метод маршрутизатора .navigate() в компоненте или routerLink в некотором элементе html.

Я пробовал что-то подобное

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

или

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

или

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

и получил эту ошибку:

Ошибка: невозможно сопоставить ни один маршрут. Сегмент URL: ''

Answer 1

Зависит от того, с какого компонента вы хотите перейти.

От вкладок до ListPage:

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

Если вы переходите от ProfilePage к ListPage (которые являются братьями и сестрами), то вам нужно использовать это:

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

В приведенном выше коде route - это объект ActivatedRoute, поэтому он включает относительную навигацию по текущему маршруту. Вы можете вставить его в конструктор следующим образом:

constructor(private route: ActivatedRoute)

Я тоже однажды столкнулся с той же проблемой и попробовал все, но ничего не получалось. В конце концов, Intellisense кода Visual Studio помог мне в этом. Надеюсь, это кому-нибудь поможет.

Answer 2

Упоминание outlets в routerLink при переходе к определенной точке.

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

, который в конечном итоге будет генерироваться ниже маршрута

http://localhost:4200/tabs/profile/(profile:profile//list:none)

Answer 3

Попробуйте:

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

Это решило мою проблему. Удачного кодирования:)

Answer 4

Если вы хотите перейти к маршруту list, вам нужно сообщить угловой, что это дочерний маршрут tabs

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

В роутерной навигации вам нужно передать маршруты в виде массива string, так что теперь angular найдет для родителя tabs и проверит дочерний маршрут, если он ничего, он перейдет на pathMatch: 'full', если не будет перейти к конкретному дочернему маршруту

В routerLink вы можете использовать тот же массив для соответствия маршруту

Спасибо, счастливого кодирования !!