如何限制用户在单击导航栏选项卡时进行导航？

Question

我有一个导航栏，我只想通过下一步和后退按钮导航，必须限制直接单击选项卡。下面是我尝试过的代码，但它们没有按预期工作，

<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 & 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 & 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，如下所示。

非常感谢更好的解决方案或建议。

提前致谢。

Answer 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
}