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

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

子路由模块：

    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-如果用户登录，则应始终加载它。它显示其他三个组件（其中两个，新的和详细的组件，通过我想要的第二个路由器插座）并正在传递@输入信息到列表组件：

    <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

阅读您的问题后，我认为单个路由器结构完全可以满足您的需求。

在您想使用 router-outlets 实现某些目标之前，请仔细考虑这是否是最佳选择？

我了解到您希望满足以下2个要求：

区分已登录和未登录
动态更新某些组件

在这种情况下，只需为登录/注销用户使用两个不同的组件即可满足第一个要求。

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

对于第二个要求，子路由器出口应该可以解决问题。

我建议您使用一种简单的方法来检查您是否真的需要路由器插座来参与其中。也就是说，如果此功能需要使当前状态反映在URL中，那么可以的话，您可以使用路由器插座，否则就不必这样做。因为只是让简单的事情变得复杂。

角形5个多个路由器出口和子模块

1 个答案: