如何限制用戶在 angular 中單擊導航欄的選項卡進行導航？

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
}