materializecss sidenav在angular中不起作用
materializecss sidenav在angular中不起作用
提问于 2019-12-13 21:01:38
实际上，我正在尝试在我的angular项目中实现materializecss，但在这里我所做的并不适用于我
npm install --save materialize-css jquery font-awesomeAngular.json
"styles": [
"src/styles.css",
"node_modules/materialize-css/dist/css/materialize.css",
"node_modules/font-awesome/css/font-awesome.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/materialize-css/dist/js/materialize.js"
]我正在尝试实现导航栏响应
<nav>
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">Javascript</a></li>
<li><a href="mobile.html">Mobile</a></li>
</ul>
</div>
</nav>
<ul class="sidenav" id="mobile-demo">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">Javascript</a></li>
<li><a href="mobile.html">Mobile</a></li>
</ul>我也得到了这样的输入：
回答 2
Stack Overflow用户
发布于 2019-12-13 21:13:58
您似乎在错误的位置添加了样式和JavaScript路径。
您可能已经将它们添加到：
projects >演示>架构>测试>选项>
styles和scripts
添加它们的正确路径为：
projects >演示>架构>生成>选项>
styles和scripts
转念一想，最好将样式添加到styles.css文件中，而不是将它们保存在一个集中的位置。如下所示：
@import "~materialize-css/dist/css/materialize.css";
@import "~font-awesome/css/font-awesome.css"这是你的推荐人的。
Stack Overflow用户
发布于 2019-12-13 22:31:23
首先编写这条import语句
import M from 'materialize-css';其次，在您的ngAfterViewInit()中编写以下代码：
ngAfterViewInit() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems, {preventScrolling:true});
}工作演示: link
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59323144
复制相关文章
相似问题
腾讯云开发者
