Bootstrap 4 navbar не работает с угловыми ссылками роутера

Question

У меня проблемы с настройкой роутера по синтаксису загрузчика 4 navbar. Очевидно, им нужны атрибуты href, чтобы иметь возможность щелкать по ним. Есть ли способ их включить?

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

Я импортировал стили и скрипт в angular.json, используя последний угловой угловой CLI.

"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

Вы можете импортировать стиль в свой корневой CSS-файл @import "~ bootstrap / dist / css / bootstrap.css";

Старайтесь избегать использования bootstrap.js, так как он построен на jquery. Angular предоставляет пакет для использования bootstrap.js, который вы можете использовать. Посетите https://ng -bootstrap.github.io / # / Getting-Start , чтобы понять, как использовать модуль угловой загрузки.

Удачного кодирования, Приветствия

Answer 2

Я забыл импортировать RouterModule в NavBarModule, чтобы сделать эту работу.Затем мне пришлось изменить routerLink="/dashboard" на [routerLink]="['/dashboard']", чтобы ссылки имели атрибут href.

Answer 3

Вы можете попробовать запустить угловой проект.

  "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"
]