角2 MaterializeCSS Javascript関数が呼び出されない

Dropdownメニューに問題があります。ドロップダウンには2つの要素がありますが、いずれのオプションも表示されません。私はこれが私のJavascriptの問題だと思っていますが、なぜNPMとMaterializeCSSの.jsファイルと.cssファイルなので、うまくいかないのか分かりません。ここでは、現在どのように見えるのイメージは次のとおりです。 index.htmlを角2 MaterializeCSS Javascript関数が呼び出されない

<!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"スラッシュは別の方法で丸めるべきです。 materializeインクルードパスを使用して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

ありがとう！私がチェックして、私が戻ってきたときにこれがうまくいくかどうかを見て、それがどのようになっているかをあなたに知らせます –

角2 MaterializeCSS Javascript関数が呼び出されない

答えて

関連する問題