Почему домашняя вкладка всегда активна?

Question

В моем приложении есть два маршрута: home и page1

это два тега привязки, которые ведут к соответствующим маршрутам, я изменяю цвет фона активной вкладки на красный, цвет по умолчанию - желтый.

1. , когда активным маршрутом является '/', домашняя вкладка становится красной - ОК
2. , когда я нажимаю '/ page1', домашняя вкладка и страница 1 становятся красными. Почему? Я считаю, что только вкладка страницы 1 становится красной.

вот фрагменты кода

const routes: Routes = [
  { path: 'page1', component: Page1Component },
  { path: '', component: HomeComponent },
  { path: '**', redirectTo: '' }
];

<a routerLink="/" [routerLinkActive]="['active-tab']">Home</a>

<a routerLink="/page1" [routerLinkActive]="['active-tab']">Page 1</a>

<router-outlet></router-outlet>

a{
  padding: 10px;
  background: yellow;
}

a.active-tab{
  background: red;
}

Вот код стекаблица проблемы вы можете видеть, когда при нажатии на / page2 маршрут становятся активными обе вкладки.

Я пробовал решение

<a routerLink="/" [routerLinkActive]="['active-tab']" [routerLinkActiveOptions]="{exact: true}"> Home </a>

, но когда я получаю доступ к домашнему маршруту с параметрами запроса (http://localhost:4200/?myParam=5), домашняя вкладка НЕ ​​активируется.

Answer 1

Это долгосрочная проблема

Как вы обнаружили, вы можете либо

1. Соответствовать точному URL, включая параметры запроса

ИЛИ

Соответствует текущему маршруту, включая маршруты-потомки

Обходной путь для этого - избегать использования routerLinkActive там, где это необходимо, и вместо этого проверять маршрут вручную.

компонент. html

<a routerLink="/" [class.active-tab]="isLinkActive('/')">
  Home
</a>

component.ts

constructor(private router: Router) {}

isLinkActive(url): boolean {
  const queryParamsIndex = this.router.url.indexOf('?');
  const baseUrl = queryParamsIndex === -1 ? this.router.url : this.router.url.slice(0, queryParamsIndex);
  return baseUrl === url;
}

Вы все равно должны использовать routerLinkActive там, где можете, и следить за этой проблемой в будущем, если / когда команде Angular удалось создать функциональность, о которой спрашивают многие.

DEMO: https://stackblitz.com/edit/angular-cac4a3

Answer 2

Это проблема на самом деле. URL не остается прежним (или, другими словами, точным, если есть некоторые параметры). Но у кого-то уже есть способ обойти это, на самом деле 2. Совместное использование ссылки в сообщении stackoverflow для аналогичной проблемы. Основной ответ - это ваше решение go, а следующий пост после принятого ответа - один (если у вас есть только 2 вкладки) - со скрытым атрибутом (ответ Камеруна).

Для получения подробной информации перейдите по следующей ссылке. :

Как использовать "routerLinkActive" с параметрами запроса в Angular 6?