Стрелка внизу для активной ссылки в угловых - PullRequest
Новая
       36

Стрелка внизу для активной ссылки в угловых

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

Я делаю приложение в angular 6 и использую загрузчик navbar для ссылок маршрутизатора,

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, то эта конкретная ссылка должна стать активной, а если применяется активный класс, то мне нужно показать стрелку внизу активной ссылки.

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

Я очень новичок в угловых и, следовательно, любезно помогите мне, если что-то упущено в этом.

Стек, который я работал,

https://stackblitz.com/edit/angular-hhwx3j?file=src%2Fapp%2Fapp.component.html

Примечание: jquery не допускается.

Ответы [ 4 ]

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

Вы использовали директивы routerLink и routerLinkActive, которые выглядят хорошо. Просто включите конфигурацию маршрутизации в Модуль.

пример - 

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

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

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

компонент для соответствующего дома, продукта .. должен быть определен в модуле маршрутизатора и задавать стили для "hightlight". отметьте это https://angular.io/api/router/RouterLinkActive

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

Это довольно просто, для этого вы должны создать класс с именем 'active' и использовать его внутри. Ваш код будет выглядеть так: 

<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;
 }
0 голосов
/ 30 октября 2018

У вас есть встроенные параметры для активированного маршрута. 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>
...