Question

我的Dropdown菜单无法解决问题。下拉列表有2个元素，但它没有向我显示任何选项。我相信这是我的Javascript的一个问题，但我不确定为什么它不起作用，因为它是直接来自NPM和MaterialiseCSS的.js和.css文件。这是目前的样子图片：

以下是我的一些代码：的的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);

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

另外，还有一点额外的问题，但是我在MaterialiseCSS .css文件中做的StickyFooter修改也无法正常工作。我觉得这与我的.js文件无效的原因类似。

提前致谢！

**仍在寻找解决方案！

Answer 1

我在这里创建了一个环境并进行了一些调试。问题是在index.html中加载了js。但是，在发生这种情况后会加载您的组件。这就是它没有自动创建下拉的原因。您需要将其添加到welcome.component.ts。

import { ..., AfterViewInit } from '@angular/core';

@Component({
  ...
})
export class WelcomeComponent {

    ...

    ngAfterViewInit() {
        $('.dropdown-button').dropdown();
    }
}

Angular 2 MaterialiseCSS Javascript函数未调用

1 个答案: