Блог

Главная - Вопросы по программированию - Как ограничить пользователя от навигации по щелчку вкладок навигационной панели в angular?

Как ограничить пользователя от навигации по щелчку вкладок навигационной панели в angular?

#javascript #angular #typescript #bootstrap-4 #angular10

#javascript #angular #typescript #bootstrap-4 #angular10

Вопрос:

У меня есть панель навигации, по которой я хочу перемещаться только по кнопкам «Далее» и «Назад», нажатие непосредственно на вкладки должно быть ограничено. Ниже приведен мой код, который я пробовал, но они работают не так, как ожидалось,

 <nav class="navbar navbar-expand-lg">
    <div class="navbar-collapse justify-content-center" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link mr-5" [ngClass]="href == '/expert-welcome/expert-profile'? '': 'disabled'" [routerLink]="['/expert-welcome/expert-profile']" [routerLinkActive]="['is-active']">
                    <b class="circularBold">Profile Details</b>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link mr-5" [routerLink]="['/expert-welcome/expert-education']" [routerLinkActive]="['is-active']">
                    <b class="circularBold">Education amp; Experience</b>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link mr-5">
                    <b class="circularBold">Services Offerings</b>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link mr-5">
                    <b class="circularBold">Availability amp; Fees</b>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link">
                    <b class="circularBold">Listing Details</b>
                </a>
            </li>
        </ul>
    </div>
</nav>

CSS

 .disabled{
    pointer-events: none;
}

При таком подходе он работает частично, когда я перемещаюсь по кнопкам назад и далее, маршрут загружается, но значение не исправляется, мне придется перезагрузить страницу, чтобы новое значение было исправлено.

В подходе 2 я удалил routerLink и routerLinkActive, но я хочу показать другой css для активной вкладки, как показано ниже.

введите описание изображения здесь

Приветствуется лучшее решение или предложения.

Заранее спасибо.

Комментарии:

1. Пожалуйста, создайте stackblitz для того же, чтобы мы могли разветвляться и вносить необходимые изменения.

2. Если вы используете маршруты в своей панели навигации, поиск охраняется. Затем вы можете определить с помощью сервиса, разрешен ли пользователю доступ к определенной странице, это также защитит от того, если кто-то будет перемещаться, вводя ограниченный URL. Официальный документ можно найти здесь angular.io/guide/router#preventing-unauthorized-access

Ответ №1:

 <a routerLink="/your/path"><span (click)="preventRloute($event)">Test link</span></a>

и написать функцию

 function preventRloute($event: MouseEvent) {
if (condition) {
    $event.stopPropagation();
    // your code...
    return;
}
// navigates
}
Метки: