Javascript 引导4导航栏不适用于角路由器链接
在引导4导航条语法上设置路由器链接时遇到问题。显然,他们需要href属性才能单击它们。有什么方法可以启用它们吗Javascript 引导4导航栏不适用于角路由器链接,javascript,html,css,angular,bootstrap-4,Javascript,Html,Css,Angular,Bootstrap 4,在引导4导航条语法上设置路由器链接时遇到问题。显然,他们需要href属性才能单击它们。有什么方法可以启用它们吗 <div class="collapse navbar-collapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" routerLink="/dashboard"
<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 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"
]
您可以通过以下方式在根css文件中导入样式: @导入“~bootstrap/dist/css/bootstrap.css” 尽量避免使用bootstrap.js,因为它是基于jquery构建的。Angular提供了一个使用bootstrap.js的包,您可以使用它。 访问了解如何使用角引导模块 快乐编码,
干杯我忘了将
RouterModule
导入NavBarModule以使其正常工作。然后,我不得不将routerLink=“/dashboard”
更改为[routerLink]=“['/dashboard']”“
,以获得具有href
属性的链接。语法似乎正确,您能期待呈现格式的dom并检查href属性是否未添加吗?在浏览器中检查了代码。href属性不会自动添加。新的angular 6具有与现在为angular.json的angular_cli.json
相同级别的node_模块。因此,您不需要。
。
"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"
]