我遇到问题,我的下拉菜单无法正常工作。下拉菜单有2个元素,但没有显示任何选项。我相信这是Javascript的问题,但我不确定为什么它不起作用,因为它是直接来自NPM和MaterializeCSS的.js和.css文件。这里是什么样子目前的图像:Angular 2 MaterializeCSS JavaScript函数未调用
下面是我的一些代码: 的index.html
<!DOCTYPE html>
<html>
<head lang="en">
<base href="/">
<title>Angular 2 Project</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="app/app.component.css" rel="stylesheet" />
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="node_modules/materialize-css/dist/css/materialize.min.css">
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function (err) { console.error(err); });
</script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules\materialize-css\dist\js\materialize.min.js"></script>
</head>
<body>
<pm-app>Loading App...</pm-app>
</body>
</html>
systems.config.js
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
"materialize-css": "npm:materialize-css",
"angular2-materialize": "npm:angular2-materialize",
// other libraries
'rxjs': 'npm:rxjs'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
"materialize": {
"main": "dist/js/materialize"
}
}
});
})(this);
我们lcome.component.html(页面见上图)
<h1>Eddie's PA Emporium</h1>
<!-- Dropdown Trigger -->
<a materialize='dropdown' class='dropdown-button btn' href='javascript:void(0);' data-activates='options'>
This is a dropdown
</a>
<!-- Dropdown Structure -->
<ul id='options' class='dropdown-content'>
<li><a href="javascript:void(0);">Link 1</a></li>
<li><a href="javascript:void(0);">Link 2</a></li>
</ul>
<p><a href="/categories">Choose a Category</a></p>
<p><a href="/products">See all of our PA Inventory</a></p>
此外,一些额外的问题,但我在MaterializeCSS .css文件所做的StickyFooter修改不能正常工作的。我有一种感觉,这是为什么我的.js文件无法正常工作的原因。
在此先感谢!
**仍在寻找解决方案!
“node_modules \ materialize-css \ dist \ js \ materialize.min.js”斜杠应该是其他方式,我认为。通过实现包含路径来检查你的index.html文件。 – Niraj
你有什么错误吗? – wannadream