Не работает маршрутизация с несколькими макетами Angular

#html #angular #typescript #routes #angular-routing

#HTML #угловая #typescript #маршруты #угловая маршрутизация

Вопрос:

У меня есть следующая структура с несколькими макетами без отложенной загрузки. При переходе к https://localhost:44327/admin или / student это ничего не показывает. Если я использую пустой путь вместо admin и student, а затем перейду к его дочернему маршруту (/ manageConcern), он загружает первый макет (AdminLayoutComponent), указанный в маршрутизации. Второй LayoutCompnent (/trainings) не загружается. похоже, что маршрутизатор-выход в app.component не может прочитать пути. Есть идеи, чего мне здесь не хватает? Это то, чего я хочу достичь https://stackblitz.com/edit/angular-multi-layout-example

Routing-module.ts

 RouterModule.forRoot([
  {
    path: 'admin',
    component: AdminLayoutComponent,
    children: [
      {path: '', redirectTo: 'manageConcern', pathMatch: 'full'},
      {path: 'manageConcern', component: MasterConcernComponent},
      {path: 'createTraining', component: AdminComponent},
    ]
  },
  {
    path: 'student',
    component: StudentLayoutComponent,
    children: [
      {path: '', redirectTo: 'trainings', pathMatch: 'full'},
      {path: 'trainings', component: TrainingsComponent},
    ]
  }
]),

AdminLayoutComponent.html

 <app-header></app-header>
    <app-menu [menuItems]="menuItems"></app-menu>
    <div class="app-body-content m-5 p-4">
       <router-outlet></router-outlet>
    </div>

StudentLayoutComponent.html

     <app-menu [menuItems]="menuItems"></app-menu>
    <div class="app-body-content m-5 p-4">
       <router-outlet></router-outlet>
    </div>

app.component.html

  <router-outlet></router-outlet>

1. Я хочу простую структуру с несколькими макетами без использования отложенной загрузки. Проверьте этот пример stackblitz.com/edit/angular-multi-layout-example @Джейсон Уайт

2. на первый взгляд, ваш код кажется нормальным. есть ли какие-либо ошибки? если бы вы могли повторить свою ошибку с помощью stackblitz, я мог бы взглянуть на это.

3. @RameezRami Я не получаю никаких ошибок, в которых заключается проблема. Я использовал ваш пример и установил маршруты компоновки как пустые пути и прокомментировал путь перенаправления второго макета (обучение). Когда два пути к макету пусты, он переходит к первому макету в списке маршрутизации, и он отображается. Мой маршрутизатор просто не может читать пути, если они указаны. Я почти 2 дня борюсь с этим.

4. @RameezRami Я ПОНЯЛ, мне просто нужно было добавить <base href=»/»> в мой index.html потому что активный маршрут для app.component.ts был неизвестен. это действительно странно

Ответ №1:

Поскольку app.component.ts не является маршрутизируемым компонентом, он ничего не знает об активном маршруте. Если вы хотите использовать свой основной маршрутизатор-выход в app.component.ts, вам нужно добавить <base href="/"> в свой index.html .

Ответ №2:

Я думаю, вам нужно добавить основной маршрут в массив маршрутов. { path: «, компонент: AnyComponent, }