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

Я делаю приложение в 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.

Вы использовали директиву routerLink и routerLinkAcitve, которая выглядит нормально. Вам просто нужно реализовать маршрутизацию, чтобы увидеть это в действии.

Sunil Singh 30.10.2018 09:28

ваша ошибка заключается в том, что вы помещаете routerlinkactive в LI, вы не можете этого сделать, вам нужно поместить его в <a>, чтобы он работал правильно.

Talg123 30.10.2018 09:35

@SunilSingh, Можете ли вы использовать мой код (см. Stackblitz вопроса) и показать разницу активных ссылок? Потому что я не получаю никаких изменений, если нажимаю на любую ссылку.

Maniraj Murugan 30.10.2018 10:10

Обратитесь к этому простому примеру stackblitz.com/edit/angular-routerlinkactive-ebsmaz

Sunil Singh 30.10.2018 10:21

@SunilSingh, спасибо, это то, что я ожидал .. Если вы отправите сообщение в качестве ответа, я приму это.

Maniraj Murugan 30.10.2018 10:27
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
5
963
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

У вас есть встроенные параметры для активированного маршрута. 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 вопроса) и показать разницу активных ссылок? Потому что я не получаю никаких изменений, если нажимаю на любую ссылку.

Maniraj Murugan 30.10.2018 10:10

вы смотрите на то, что я редактировал

Talg123 30.10.2018 10:23

.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 вопроса) и показать разницу активных ссылок? Потому что я не получаю никаких изменений, если нажимаю на любую ссылку.

Maniraj Murugan 30.10.2018 10:10

вам не нужно использовать опору "href" в angular ... вместо этого мы используем routerLink. и для каждого значения routerLink соответствующий компонент должен быть определен в модуле маршрутизатора

Abidh 30.10.2018 10:19
quora.com/… надеюсь эта ссылка поможет ..
Abidh 30.10.2018 10:26

вы не импортировали маршруты в module.ts

Abidh 30.10.2018 10:29

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

<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 вопроса) и показать разницу активных ссылок? Потому что я не получаю никаких изменений, если нажимаю на любую ссылку.

Maniraj Murugan 30.10.2018 10:10

Вы не импортировали маршруты в app.module.ts

kedar kulkarni 30.10.2018 10:17

Вы пропустили много шагов в своем коде в stackbiltz. Ваш app.module.ts неполный

kedar kulkarni 30.10.2018 10:27
Ответ принят как подходящий

Вы использовали директиву 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

Другие вопросы по теме