Bootstrap 选项卡在 Angular CLI 13.3.0 中不再起作用

Question

问题详情

单击“更改密码”选项卡时，出现错误消息：无法匹配任何路由。 URL 段：'v-ChangePassword'

我错过了什么吗？

下面是tabs所在页面的截图。

Bootstrap 已添加到应用程序模块中：import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

Html代码

<div class="col-sm-2">
    <div class="nav flex-column nav-pills" id="v-tab" role="tablist" aria-orientation="vertical">
        <a 
            class="nav-link active" 
            id="v-profile-tab" 
            data-toggle="pill" 
            href="#v-profile" 
            role="tab" 
            aria-controls="v-profile" 
            aria-selected="true">
            Profile
        </a>
        <a 
            class="nav-link" 
            id="v-ChangePassword-tab" 
            data-toggle="pill" 
            href="#v-ChangePassword" 
            role="tab" 
            aria-controls="v-ChangePassword" 
            aria-selected="true">
            Change Password
        </a>
        <a 
            class="nav-link" 
            id="v-AccountAccessHistory-tab" 
            data-toggle="pill" 
            href="#v-AccountAccessHistory" 
            role="tab" 
            aria-controls="v-AccountAccessHistory" 
            aria-selected="true">
            Access History
        </a>
    </div>
</div>
<div class="col-md-10">
    <div class="tab-content" id="v-tabContent">
        <div 
            class="tab-pane fade show active" 
            id="v-profile" 
            role="tabpanel" 
            aria-labelledby="v-profile-tab">
            <basicsettings></basicsettings>
        </div>
        <div 
            class="tab-pane fade show" 
            id="v-ChangePassword" 
            role="tabpanel" 
            aria-labelledby="v-ChangePassword-tab">
            <changepassword></changepassword>
        </div>
        <div 
            class="tab-pane fade show" 
            id="v-AccountAccessHistory" 
            role="tabpanel" 
            aria-labelledby="v-AccountAccessHistory-tab">
            <accesslogs></accesslogs>
        </div>
    </div>
</div>

Answer 1

问题是选项卡上的 href 属性正在更改 URL。 Angular 路由器正在尝试解析 URL 的路由但失败了，这就是显示的错误。

要修复它，您可以像示例 here 一样实现垂直制表符。

顺便说一句，你真的应该用 ng-bootstrap 标记这个问题，因为它更像是一个 ng-bootstrap 问题，而不是纯粹的 Angular.

Bootstrap 选项卡在 Angular CLI 13.3.0 中不再起作用

Bootstrap Tab no longer functional in Angular CLI 13.3.0

angular

angular-cli

ng-bootstrap