Angular 2 MaterializeCSS JavaScript函數未調用

我遇到問題，我的下拉菜單無法正常工作。下拉菜單有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文件無法正常工作的原因。

在此先感謝！

**仍在尋找解決方案！

來源

2017-04-24 Eddie Maiale

「node_modules \ materialize-css \ dist \ js \ materialize.min.js」斜槓應該是其他方式，我認爲。通過實現包含路徑來檢查你的index.html文件。 – Niraj

你有什麼錯誤嗎？ – wannadream

我在這裏創建了一個環境並做了一些調試。問題是物化js被加載到index.html中。然而，你的組件在發生之後被加載。這就是爲什麼它沒有自動創建下拉菜單。您需要將其添加到welcome.component.ts中。

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

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

    ... 

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

來源

2017-04-28 04:52:36 wannadream

謝謝！當我回來時，我會檢查它是否有效，並讓你知道它是如何發生的！ –

Angular 2 MaterializeCSS JavaScript函數未調用

回答

相關問題