Обновление март 2021 г.
Команда Angular наконец объединила PR для этого, вы можете посмотреть https://github.com/angular/angular/pull/40303 для получения дополнительных сведений.
Чтобы использовать это, просто поместите
<div routerLinkActive="active-link" [routerLinkActiveOptions]="options">
</div>
Где options
будет иметь форму IsActiveMatchOptions
export declare interface IsActiveMatchOptions {
fragment: 'exact' | 'ignored';
matrixParams: 'exact' | 'subset' | 'ignored';
paths: 'exact' | 'subset';
queryParams: 'exact' | 'subset' | 'ignored';
}
или просто примите логическое значение exact
{
exact: boolean
}
Исходный вопрос
Я использую routerLink в Angular, как показано ниже
<li routerLinkActive="active">
<a [routerLink]="['/view', 10]"
[queryParams]="{'offset': 0, 'numberOfItems': 100}"
queryParamsHandling="merge">
<div>View</div>
<div><span class="badge" [innerHtml]="viewCount"></span></div>
</a>
</li>
Итак, класс .active был добавлен в тег li, когда URL-адрес выглядит как
/view/10?offset=0&numberOfItems=100
Если URL-адрес был изменен на offset
или numberOfItems
на другое значение, класс .active будет удален, например.
/view/10?offset=0&numberOfItems=120
Я просмотрел angular docs и мне удалось заставить его работать, добавив еще один routerLink, но сделав его скрытым как показано ниже.
<li routerLinkActive="active">
<a [routerLink]="['/view', 10]"
[queryParams]="{'offset': 0, 'numberOfItems': 100}"
queryParamsHandling="merge">
<div>View</div>
<div><span class="badge" [innerHtml]="viewCount"></span></div>
</a>
<a [routerLink]="['/view', 10]" style="display:none;">
<div><span class="badge" [innerHtml]="viewCount"></span></div>
</a>
</li>
Кажется, что описанный выше подход - это небольшая хитрость. Есть ли какая-либо конфигурация, которую я могу настроить для работы routerLinkActive, когда параметр маршрутизатора представлен с необязательным параметром запроса?
<a>
? Если это значения по умолчанию, не следует ли их устанавливать внутри самого целевого компонента? В этом случае вам понадобится только один<a>
. - person Harry Ninh   schedule 02.08.2017