Bootstrap 4导航栏不适用于角度路由器链接

Question

I have trouble setting up my router links on bootstrap 4 navbar syntax. Apparently they need href attributes to be able to click on them. Is there any way to enable them anyway?

<div class="collapse navbar-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" routerLink="/charts" routerLinkActive="active">Charts</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" routerLink="/map" routerLinkActive="active">Map</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" routerLink="/about" routerLinkActive="active">about</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" routerLink="/contact" routerLinkActive="active">Contact</a>
            </li>
        </ul>
</div> 

I have imported the styles and script into angular.json using the angular CLI latest.

"styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "node_modules/font-awesome/css/font-awesome.css",
    "src/styles.scss"
],
"scripts": [
    "node_modules/jquery/dist/jquery.slim.js",
    "node_modules/popper.js/dist/umd/popper.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
] 

Answer 1

You can try and run angular project.

  "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/font-awesome/css/font-awesome.css",
        "src/styles.scss"
    ],
"scripts": [
    "../node_modules/jquery/dist/jquery.slim.js",
    "../node_modules/popper.js/dist/umd/popper.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
] 

Answer 2

You can import the style in your root css file by @import "~bootstrap/dist/css/bootstrap.css";

Try to avoid using bootstrap.js as this is built on jquery. Angular provides a package for using bootstrap.js you can use that. Visit https://ng-bootstrap.github.io/#/getting-started to have an understanding of how to use Angular bootstrap module.

Happy coding, Cheers

Answer 3

I forgot to import RouterModule into the NavBarModule to make this work. I then had to change routerLink="/dashboard" to [routerLink]="['/dashboard']" to get the links to have an href attribute.