Angular 8 - 路由答案

【问题标题】：Angular 8 - RoutingAngular 8 - 路由
【发布时间】：2020-02-25 11:52:44
【问题描述】：

我正在尝试了解路由的工作原理，我会简要地向您解释我的项目。

登录后，用户被导航到仪表板，侧边栏显示 2 个导航链接：/projects 和 /training。

这 2 条路线需要显示在侧边栏旁边，但它正在使用该路线打开新页面。我怎样才能做到这一点？

我尝试在应该显示项目和培训的地方设置路由器插座，但没有逻辑，我尝试为路由器插座设置名称，但要么不起作用。

路由模块

const appRoutes: Routes = [
  { path: 'dashboard', component: MenuComponent, canActivate: [AuthGuard] },
  { path: 'project-list', component: ProjectListComponent, canActivate: [AuthGuard] },
  { path: 'training', component: TrainingComponent, canActivate: [AuthGuard] },
  { path: '', component: LoginComponent},
  { path: '**', redirectTo: '' }
];

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

应用组件

<router-outlet></router-outlet>

菜单组件（侧边栏）

<div class="w-100 container-fluid">
  <div class="row page-container">
    <!-- sidebar -->
    <div
      class="d-none d-md-block"
      [ngClass]="activate ? 'sidebar-expanded' : 'hide-menu'"
      id="sidebar"
    >
      <ul class="sidebar-nav list-unstyled">
        <li>
          <uhura-logo [activate]="activate"></uhura-logo>
        </li>
        <li>
          <uhura-navigation [activate]="activate"></uhura-navigation>
        </li>
        <div class="toggle-container" (click)="toggleClass()">
          <a class="icons-menu typcn" [ngClass]="activate ? 'typcn-chevron-left': 'typcn-chevron-right'">
          </a>
        </div>
        <li>
          <uhura-account></uhura-account>
        </li>
      </ul>
    </div>
    <!-- sidebar -->
    <div class="col-10">
          HERE ROUTES SHOULD BE DISPLAYED
    </div>
  </div>
</div>

嵌套在侧边栏内的导航组件

<div class="navigation-container">
  <div *ngIf="activate" class="nav-info">
    <p>Navigation</p>
  </div>
  <ul class="nav flex-column nav-list">
    <li class="nav-item">
      <a class="nav-link" routerLink="/project-list" routerLinkActive="active" [routerLinkActiveOptions]="{exact:
        true}">
        <span class="typcn typcn-folder"></span>
        <span *ngIf="activate">Projects</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/training" routerLinkActive="active" [routerLinkActiveOptions]="{exact:
        true}">
        <span class="typcn typcn-lightbulb"></span>
        <span *ngIf="activate">Training</span>
      </a>
    </li>
  </ul>
</div>

【问题讨论】：

您想在侧边栏中加载培训/项目？然后您需要将它们添加为仪表板的子路由
在 app.component 中仅添加组件，并将 router-outlet 添加到您要显示路由组件的位置。

标签： javascript angular angular2-routing

【解决方案1】：

在app.component.html 中，您需要放置Menu、NavBar 和<router-outlet></router-outlet>

<app-nav-bar></app-nav-bar>
<app-menu></app-menu>
<router-outlet></router-outlet>

【讨论】：

【解决方案2】：

您可以像这样构造AppComponent：

<app-sidebar></app-sidebar>
<router-outlet></router-outlet>

另外，如果您在登录页面上，请注意隐藏侧边栏，例如

<app-sidebar *ngIf="isLoggedIn"></app-sidebar>

【讨论】：

你接近我想要实现的目标，所以在“/”上应该没有侧边栏，但在用户登录后，它会被重定向到带有侧边栏的仪表板，如果他在侧边栏选择项目，它应该在同一页面上呈现，我可能对我的项目结构感到困惑

【解决方案3】：

您需要使用嵌套路由。试试这个配置。

const appRoutes: Routes = [
  {
    path: 'dashboard',
    component: MenuComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: '',
        pathMath: 'full',
        redirectTo: 'project-list'
      },
      {
        path: 'project-list',
        component: ProjectListComponent,
      },
      {
        path: 'training',
        component: TrainingComponent,
      },
    ]
  },
  {
    path: '',
    component: LoginComponent
  },
  { path: '**', redirectTo: '' }
];

也将<router-outlet></router-outlet>放在里面您要分别渲染列表或训练的 MenuComponent 模板。

<div class="w-100 container-fluid">
  <div class="row page-container">
    <!-- sidebar -->
    <div
      class="d-none d-md-block"
      [ngClass]="activate ? 'sidebar-expanded' : 'hide-menu'"
      id="sidebar"
    >
      <ul class="sidebar-nav list-unstyled">
        <li>
          <uhura-logo [activate]="activate"></uhura-logo>
        </li>
        <li>
          <uhura-navigation [activate]="activate"></uhura-navigation>
        </li>
        <div class="toggle-container" (click)="toggleClass()">
          <a class="icons-menu typcn" [ngClass]="activate ? 'typcn-chevron-left': 'typcn-chevron-right'">
          </a>
        </div>
        <li>
          <uhura-account></uhura-account>
        </li>
      </ul>
    </div>
    <!-- sidebar -->
    <div class="col-10">
          <router-outlet></router-outlet>
    </div>
  </div>
</div>

将导航组件修改为类似的东西

<div class="navigation-container">
  <div *ngIf="activate" class="nav-info">
    <p>Navigation</p>
  </div>
  <ul class="nav flex-column nav-list">
    <li class="nav-item">
      <a class="nav-link" [routerLink]="[../project-list]" routerLinkActive="active">
        <span class="typcn typcn-folder"></span>
        <span *ngIf="activate">Projects</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link"  [routerLink]=["../training"] routerLinkActive="active">
        <span class="typcn typcn-lightbulb"></span>
        <span *ngIf="activate">Training</span>
      </a>
    </li>
  </ul>
</div>

希望对你有所帮助。

【讨论】：