Javascript 角度8-布线

我试图了解路由是如何工作的，我将用简短的总结向您解释我的项目

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

这两条路线需要显示在侧边栏的右边，但它会用该路线打开新页面。我怎样才能做到这一点

我试过在项目和培训应该显示的位置设置路由器出口，但没有逻辑，我试过为路由器出口设置名称，但都不起作用

路由模块

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="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.html

中，您需要放置菜单、导航栏和

---

您可以这样构造

AppComponent

：

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

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

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

---

您需要使用嵌套路由。 尝试此配置

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: '' }
];

同时将

放在内部 MenuComponent模板，用于分别呈现列表或训练

将导航组件修改为类似的内容

航行



项目


训练

---

希望能有所帮助。

您想在侧边栏中加载培训/项目吗？然后，您需要将它们添加为dashboard应用程序的子路由。组件仅添加组件，并将路由器出口添加到您希望显示路由组件的位置。您接近我试图实现的目标，因此在“/”上不应该有侧栏，但在用户登录后，它会通过侧栏重定向到仪表板，在仪表板上，若他选择侧边栏上的项目，它应该呈现在同一页上，我可能会对我的项目的结构感到困惑

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

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: '' }
];