Я делаю приложение в angular 6, и я использую навигационную панель начальной загрузки для ссылок на маршрутизатор,
HTML,
<nav class = "navbar navbar-expand-md bg-theme">
<div class = "container-fluid">
<!-- Toggler/collapsibe Button -->
<button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#collapsibleNavbar">
<span class = "navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class = "collapse navbar-collapse" id = "collapsibleNavbar">
<ul class = "navbar-nav text-light">
<li class = "nav-item" routerLinkActive = "active">
<a routerLink = "/home" class = "nav-link text-capitalize theme-font-size-16" href = "#">Dashboard</a>
</li>
<li class = "nav-item" routerLinkActive = "active">
<a routerLink = "/about" class = "nav-link text-capitalize theme-font-size-16" href = "#">Template</a>
</li>
<li class = "nav-item" routerLinkActive = "active">
<a routerLink = "/product" class = "nav-link text-capitalize theme-font-size-16" href = "#">Product</a>
</li>
</ul>
</div>
</div>
</nav>
<div class = "active"></div>
Здесь мне нужно получить активный класс нажатой ссылки, скажем, если я нажму ссылку Product
, тогда эта конкретная ссылка должна стать активной, и если применяется активный класс, мне нужно показать стрелку внизу активной ссылки.
Здесь я не могу получить активный класс ссылки, по которой щелкнули, а не для всех трех ссылок.
Я очень новичок в angular и, следовательно, любезно помогите мне, если в нем что-то упущено.
Стекблиц, над которым я работал,
https://stackblitz.com/edit/angular-hhwx3j?file=src%2Fapp%2Fapp.component.html
Примечание: в нем не допускается использование jquery.
ваша ошибка заключается в том, что вы помещаете routerlinkactive в LI, вы не можете этого сделать, вам нужно поместить его в <a>, чтобы он работал правильно.
@SunilSingh, Можете ли вы использовать мой код (см. Stackblitz вопроса) и показать разницу активных ссылок? Потому что я не получаю никаких изменений, если нажимаю на любую ссылку.
Обратитесь к этому простому примеру stackblitz.com/edit/angular-routerlinkactive-ebsmaz
@SunilSingh, спасибо, это то, что я ожидал .. Если вы отправите сообщение в качестве ответа, я приму это.
У вас есть встроенные параметры для активированного маршрута. https://angular.io/api/router/RouterLinkActive Посмотри на это.
<li class = "nav-item" >
<a routerLink = "/home" routerLinkActive = "active" class = "nav-link text-capitalize theme-font-size-16" href = "#">Dashboard</a> <-- use the routerLinkActive here and not on the li
</li>
Можете ли вы использовать мой код (см. Stackblitz вопроса) и показать разницу активных ссылок? Потому что я не получаю никаких изменений, если нажимаю на любую ссылку.
вы смотрите на то, что я редактировал
.ts файл
let links = ['/home','/product','/sample'];
.html файл
<li class = "nav-item" *ngFor = "let item of links">
<a routerLink=item class = "nav-link text-capitalize theme-font-size-16" routerLinkActive = "highlight">{{item}}</a>
</li>
компонент для соответствующего дома, продукта .. должен быть определен в модуле маршрутизатора. и задавать стили для "подсветки". проверьте это https://angular.io/api/router/RouterLinkActive
Можете ли вы использовать мой код (см. Stackblitz вопроса) и показать разницу активных ссылок? Потому что я не получаю никаких изменений, если нажимаю на любую ссылку.
вам не нужно использовать опору "href" в angular ... вместо этого мы используем routerLink. и для каждого значения routerLink соответствующий компонент должен быть определен в модуле маршрутизатора
вы не импортировали маршруты в module.ts
Это довольно просто, для этого вы должны создать класс «активный» и использовать его внутри. Итак, ваш код будет выглядеть так:
<li class = "nav-item" >
<a routerLink = "/home" [routerLinkActive] = "'active'" class = "nav-link text-capitalize theme-font-size-16" href = "#">Dashboard</a>
</li>
Просто создайте активное имя класса:
.active{
border-bottom : 2px solid #095d82;
transition: ease-in-out 0.7s;
}
Можете ли вы использовать мой код (см. Stackblitz вопроса) и показать разницу активных ссылок? Потому что я не получаю никаких изменений, если нажимаю на любую ссылку.
Вы не импортировали маршруты в app.module.ts
Вы пропустили много шагов в своем коде в stackbiltz. Ваш app.module.ts неполный
Вы использовали директиву routerLink и routerLinkActive, которая выглядит нормально. Просто включите конфигурацию маршрутизации в Module.
пример -
const routes: Routes = [
{ path: 'LinkA', component: AComponent },
{ path: 'LinkB', component: BComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class RootRoutingModule { }
Рабочая демонстрационная копия здесь https://stackblitz.com/edit/angular-routerlinkactive-ebsmaz
Вы использовали директиву routerLink и routerLinkAcitve, которая выглядит нормально. Вам просто нужно реализовать маршрутизацию, чтобы увидеть это в действии.