Угловые 5-ти кратные роутеры и подмодули

Question

Изучив документацию и все остальные вопросы, я все еще не могу найти приемлемый вариант для моего проекта. Я ушел от названной опции router-outlets, потому что она делает URL не таким чистым. Похоже, что со многими ответами (и я использую термин слегка, так как большинство из них либо неполные, непроверенные, либо у людей все еще есть вопросы в комментариях), кажется, для более старых версий angular, что может быть, поэтому они не являются работая как решение для меня. Будем весьма благодарны за любые другие варианты, которые могут быть представлены!

Я пытаюсь использовать два отдельных выхода маршрутизатора - один для разграничения входа в систему и нет, а другой для некоторых динамически обновляемых компонентов после проверки пользователя. До того, как у меня было требование входа в систему, выход маршрутизатора находился внутри моего основного компонента рядом с другим компонентом, который имел ссылки на маршрутизатор. Прямо сейчас, с помощью функции входа в систему, лучшее, что я могу сделать, это сделать так, чтобы все компоненты проходили через первую розетку маршрутизатора - но это разрушает родственные компоненты, которые должны отображаться.

Мое приложение в настоящее время структурировано так:

    app/
      |  app.module.ts
      |  app-routing.module.ts
      |  app.component.html
      |  components/
      |  |  header-comp/
      |  |  login-comp/
      |  |  sub-module/
      |  |  |  detail-comp/
      |  |  |  list-comp/
      |  |  |  new-comp/
      |  |  |  main-comp/
      |  |  sub.module.ts
      |  |  sub-routing.module.ts

App.module.ts:

    import {...} from ...;
    @NgModule({
      declarations: [
        AppComponent,
        HeaderComponent,
        LoginComponent
      ],
      imports: [
        AppRoutingModule,
        BrowserModule,
        SubModule,
        SubRoutingModule,
        CommonModule,
        FormsModule,
        HttpClientModule,
        ...
      ],
      providers: [...],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

Приложение-routing.module:

    import {...} from ...;
    import { RouterModule, Routes } from '@angular/router';
    import { ModuleWithProviders } from '@angular/core';
    const appRoutes: Routes = [
      { path: 'login', pathMatch: 'full', component: LoginComponent },
      { path: '', pathMatch: 'full', loadChildren: 'app/components/sub-module/sub.module#SubModule' },
      { path: '**', redirectTo: '' }
    ];
    export const AppRoutingModule: ModuleWithProviders = RouterModule.forRoot(appRoutes);

app.component.html - это должно переключаться между страницей входа или '', которая затем загрузит субмодуль и отобразит main.component.html:

    <div class="container-fluid">
      <app-header></app-header>
      <router-outlet></router-outlet>
    </div>

sub.module.ts:

    import {...} from ...;
    @NgModule({
      declarations: [
        MainComponent,
        DetailComponent,
        ListComponent,
        NewComponent,
      ],
      imports: [
        SubRoutingModule,
        ...
      ],
      bootstrap: [MainComponent]
    })
    export class SubModule { }

Модуль sub-routing.module:

    import {...} from ...;
    import { RouterModule, Routes } from '@angular/router';
    import { ModuleWithProviders } from '@angular/core';
    const subRoutes: Routes = [
      { path: '', pathMatch: 'full', children: [
          { path: '', pathMatch: 'full', component: MainComponent },
          { path: 'new', pathMatch: 'full', component: NewComponent },
          { path: 'items/:id', pathMatch: 'full', component: DetailComponent },
      ] }
    ];
    export const SubRoutingModule: ModuleWithProviders = RouterModule.forRoot(subRoutes);

main.component.html - он всегда должен загружаться, если пользователь вошел в систему. Он отображает три других компонента (два из которых, новый и подробный компоненты, проходят через мой второй желаемый маршрутизатор) и передает информацию @Input. к компоненту списка:

    <div>
      <div class="col-2 list list-group">
        <app-list [AllItems]="items" [routeId]="routeId"></app-list>
      </div>
      <div class="col-10 main">
        <router-outlet></router-outlet>
      </div>
    </div>

В list.component.html есть ссылка на маршрутизатор для подробного компонента:

    <ul>
      <li *ngFor="let item of AllItems">
        <a [routerLink]="['/items', item.id]">
          <div>{{item.name}}</div>
        </a>
      </li>
    </ul>

Я хотел бы иметь возможность использовать этот второй выход маршрутизатора в качестве основного выхода после входа в систему, потому что жесткое кодирование в компонентах app-new и app-detail вместо этого было бы очень громоздким и не использовало бы цель использования маршрутов и функций ввода. - динамическая полезность страницы будет потеряна. Мне действительно нужна только первая розетка, чтобы определить, вошел ли кто-то в систему или нет, кажется, что пустая розетка роутера, если я не могу ее выключить или как-то обойти.

Вторая пара глаз будет высоко ценится! (Я открыт для реструктуризации обратно в один файл маршрутизатора и без субмодуля, если кто-то думает, что это будет работать лучше.)

Answer 1

После прочтения вашего вопроса, я думаю, что структура одного маршрутизатора будет полностью соответствовать вашим потребностям.

Прежде чем вы захотите достичь чего-либо с помощью маршрутизаторов, тщательно подумайте, действительно ли это лучший вариант?

Я понимаю, что вы хотите выполнить следующие 2 требования:

• различать вошедших в систему и не
• динамически обновлять некоторые компоненты

Если это так, первое требование может быть достигнуто простым использованием 2 разных компонентов для входа / выхода из системы.

<app-component-when-login *ngIf="isLogin"></app-component-when-login>
<app-component-when-logout *ngIf="!isLogin"></app-component-when-logout>

Для второго требования, дочерние маршрутизаторы должны делать свое дело.

Я бы порекомендовал простой способ проверить, действительно ли вам нужны роутер-розетки для участия или нет. То есть, если эта функция должна отражать текущее состояние в URL, тогда да, вы можете использовать выходы маршрутизатора, в противном случае вам не нужно. Потому что это просто делает простые вещи более сложными.