Angular routerLinkActive соответствует точному маршруту - PullRequest
Новая
       17

Angular routerLinkActive соответствует точному маршруту

0 голосов
/ 17 апреля 2020

Запуск Angular 8. В моей главной навигации есть набор ссылок, например, /services. На этой странице есть сервисы. Когда пользователь нажимает кнопку «Производство», он переходит на URL /services/production, однако элемент навигации «Службы» теряет свое активное состояние.

Я применил [routerLinkActiveOptions]="{exact: false}", чтобы попытаться применить активные классы для не- точные маршруты, но это не поддерживает активное состояние.

маршруты для них находятся в их отдельных каталогах, поэтому у "services" есть services-routing.module, который обрабатывает его маршрутизацию. Однако навигационные ссылки - это уровень root / app.

Я думаю, мне нужно загрузить эти маршруты в app-routing.module, но я не уверен, как это сделать go, если это так.

При попытке отложенной загрузки маршрутов я получаю сообщение об ошибке: 

Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.

Я дважды проверил и убедился, что импортирую BrowserModule и BrowserAnimationsModule только на уровне app.module.

--- edit

У меня отложенная загрузка маршрутов, но это не помогло. /services показывает активный, но /services/production не

--- edit

app-routing.module: 

const routes: Routes = [
  { path: 'logout', component: LogoutComponent },
  { path: 'access-denied', component: AccessDeinedComponent }
];

app.component 

this.navLinks = [
  { path: '/about', label: 'About', icon: 'assessment' },
  { path: '/contact', label: 'Contact', icon: 'assignment' },
  { path: '/services', label: 'Services', icon: 'settings' }
];

app.component. html

  <nav class="nav-tab-group" mat-tab-nav-bar color="accent">
        <a mat-tab-link *ngFor="let link of navLinks"
        [routerLink]="link.path"
        routerLinkActive="mat-tab-label-active active-link"
        class="subnav-link">
        <mat-icon class="tab-icon">{{link.icon}} is view</mat-icon>
        <span class="link-text" >{{link.label}}</span>
    </a>
  </nav>

services-routing.module (в другом каталоге) 

const routes: Routes = [
  {
    path: '',
    component: ServicesComponent,
    canActivate: [AuthGuardService],
    data: { roles },
    children: [
      {
        path: 'services/production',
        component: ProductionComponent,
        canActivate: [AuthGuardService],
        data: { roles }
      }...
    ]
  }
];

Таким образом, фактическое поведение маршрута в службах -routing.module и навигация в root скриптах app.component. Когда я нахожусь в службах root, службы routerLink активны, но все дети неактивны.

1 Ответ

0 голосов
/ 17 апреля 2020

Решение, на которое я попал, заключается в добавлении моего класса активной ссылки условно:

[ngClass]="{'active-link': setActiveNav(link)}"

Моя переменная navLinks имеет добавление string[], которое содержит другие допустимые пути, например ['/services/production'].

Метод, который возвращает true, ищет наличие дополнительных путей и проверяет, существует ли он в location.path(), используя класс Location из @angular/common. Он также проверяет ожидаемый путь.

У меня также есть ситуация, когда навигационный элемент должен быть «активным» по совершенно не связанному URL. 

  setActiveNav(navLink): boolean {
    const currentPath = this.location.path();
    let foundPath = false;
    if (navLink.additionalPaths) {
      navLink.additionalPaths.forEach(path => {
        if (currentPath.indexOf(path) >= 0 || currentPath.indexOf(navLink.path) >= 0) {
          foundPath = true;
        }
      });
    } else if (currentPath.indexOf(navLink.path) >= 0) {
      foundPath = true;
    }

    return foundPath;
  }
...