Угловой 8 - Маршрутизация - PullRequest
Новая
       2

Угловой 8 - Маршрутизация

0 голосов
/ 30 октября 2019

Я пытаюсь понять, как работает маршрутизация, и я кратко расскажу вам о моем проекте.

После входа в систему пользователь переходит на панель инструментов и там на боковой панели отображаются 2 навигационные ссылки: / projectsи / обучение.

Эти 2 маршрута должны отображаться рядом с боковой панелью, но вместо этого открывается новая страница с этим маршрутом. Как я могу достичь этого?

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

Маршрутизацияmodule 

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>

Компонент Nav, вложенный в боковую панель 

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

Ответы [ 3 ]

0 голосов
/ 30 октября 2019

Вы можете структурировать AppComponent следующим образом: 

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

Плюс позаботьтесь о том, чтобы скрыть боковую панель, если вы находитесь на странице входа, что-то вроде 

<app-sidebar *ngIf="isLoggedIn"></app-sidebar>
0 голосов
/ 30 октября 2019

Вам необходимо использовать вложенную маршрутизацию. Попробуйте эту конфигурацию. 

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>

Надеюсь, это помогло.

0 голосов
/ 30 октября 2019

В app.component.html нужно поставить Меню, Навбар и <router-outlet></router-outlet>

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