Angular 8-路由

Question

我试图了解路由的工作原理，并在简短的摘要中向您解释我的项目。

登录后，用户导航到仪表板，并在侧边栏上显示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>

Answer 1

在app.component.html中，您需要放置菜单，导航栏和<router-outlet></router-outlet>

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

Answer 2

您可以像这样构造AppComponent：

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

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

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

Answer 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>

希望对您有帮助。