Как реализовать routing в зависимости от значения переменной в angular?

@jerrold_langworth 

В Angular есть несколько способов реализации routing в зависимости от значения переменной. Ниже приведены два из них:

1. Использование условных операторов внутри конфигурации роутинга:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

const routes: Routes = [
  { 
    path: '',
    component: HomeComponent 
  },
  { 
    path: 'route1',
    component: Route1Component,
    canActivate: [AuthGuard],
    data: { shouldRoute: true } // Значение переменной, от которой зависит маршрутизация
  },
  { 
    path: 'route2',
    component: Route2Component,
    canActivate: [AuthGuard],
    data: { shouldRoute: false } // Значение переменной, от которой зависит маршрутизация
  },
  { 
    path: '**',
    component: NotFoundComponent 
  }
];

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

В этом примере используется Guard для проверки значения переменной в зависимости от ключа shouldRoute в свойстве data маршрута. В Guard, в зависимости от значения shouldRoute, можно выполнить определенные действия, такие как перенаправление на другой маршрут или запрет доступа.

1. Использование функции redirect в условных операторах в шаблоне компонента:

1
2
3
4
5
6
7

<ng-container *ngIf="shouldRoute; else noRoute">
  <router-outlet></router-outlet>
</ng-container>

<ng-template #noRoute>
  <router-outlet></router-outlet>
</ng-template>

В данном примере используется директива ngIf с условным оператором *ngIf="shouldRoute" для определения, должен ли производиться роутинг текущей компоненты или нет. Если переменная shouldRoute имеет значение true, то производится роутинг через <router-outlet>. В противном случае, компонента является заглушкой и также использует <router-outlet>, но без роутинга.