Angular 2 实现 CSS 侧导航未显示

Question

我正在使用 Angular 2 和 materialize-CSS。我遇到的问题是，当我将页面缩小到侧面导航中汉堡包出现的位置时，单击汉堡包后，侧面导航永远不会弹出，并且屏幕会明显变暗。它永远不会像它应该的那样滑出。

下面是我的组件

import { Component, OnInit, ElementRef } from '@angular/core';
declare var jQuery: any;

@Component({
  selector: 'core-app',
  template: `
  <div class="navbar">
  <nav class="indigo">
  <div class="nav-wrapper">
    <a href="/" class="brand-logo">{{title}}</a>
    <a href="#" data-activates="nav-mobile" class="button-collapse" materialize="sideNav"
    [materializeParams]="[{menuWidth: 300,edge: 'left', closeOnClick: true, draggable: true}]"><i class="material-icons">menu</i>
    </a>
  <ul class="right hide-on-med-and-down">
    <li><a routerLink="/dashboard">Dashboard</a></li>
    <li><a routerLink="/fast">Fast Words</a></li>
    <li>extra link</li>
    <li>Logout</li>
  </ul>
  <ul id="nav-mobile" class="side-nav">
    <li><a routerLink="/dashboard">Dashboard</a></li>
    <li><a routerLink="/fast">Fast Words</a></li>
    <li><a routerLink="/dashboard">Dashboard</a></li>
    <li><a routerLink="/fast">Fast Words</a></li>
  </ul>
  </div>
</nav>
</div>       
<router-outlet></router-outlet>
`

})
export class AppComponent implements OnInit {
  title = 'Rapid Words';

  constructor(private el:ElementRef){}
  ngOnInit() {
    jQuery(this.el.nativeElement).find('.button-collapse').sideNav();
  }
}

这是我的 index.html 页面。我注释掉了 materialize CSS/jQuery，但后来我失去了所有的风格。

<html>
<head>
<title>Language Forge | Review & Rapid Words</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- 1. Load libraries -->
<!-- Import Materialize CSS -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>

<!-- Polyfill(s) for older browsers -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<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>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
  System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<base href="/">
<core-app>Loading...</core-app>
</body>
</html>

这是我的 packageJS 文件。我相信我拥有所有正确的依赖项：

"dependencies": {
"@angular/common": "~2.1.1",
"@angular/compiler": "~2.1.1",
"@angular/core": "~2.1.1",
"@angular/forms": "~2.1.1",
"@angular/http": "~2.1.1",
"@angular/platform-browser": "~2.1.1",
"@angular/platform-browser-dynamic": "~2.1.1",
"@angular/router": "~3.1.1",
"@angular/upgrade": "~2.1.1",
"angular-in-memory-web-api": "~0.1.13",
"angular2-materialize": "^6.1.1",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"jquery": "^2.2.4",
"materialize-css": "^0.97.8",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.39",
"zone.js": "^0.6.25"
},
"devDependencies": {
"@types/core-js": "^0.9.34",
"@types/node": "^6.0.45",
"concurrently": "^3.0.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.3"
},

我怎样才能解决这个问题，让侧边导航栏像它应该的那样滑出？

相关的stack overflow问题，但是没有解决我的问题，因为我用的是angular 2.我的组件添加这个style标签后，side-nav显示了，但是不让我点击关闭它，屏幕保持黑暗。

Code Pen - 在 Code Pen 中工作正常，因此它必须与 Angular 2 有关 https://codepen.io/abramjstamper/pen/BQLaQY

Answer 1

找出问题所在，这是导入问题的组合。希望这可以帮助其他遇到与 Angular2-Materialize.

相同问题的人

index.html

<!-- Compiled and minified CSS -->
<link type="text/css" rel="stylesheet" href="node_modules/materialize-css/dist/css/materialize.css"/>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Import jQuery before materialize.js -->
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/materialize-css/dist/js/materialize.min.just sayin"></script>

main.ts

import 'angular2-materialize';

系统配置

map = {
'materialize-css': 'npm:materialize-css',
'angular2-materialize': 'npm:angular2-materialize',
'jquery': 'npm:jquery'
},
packages: {
  'materialize-css': {
    "format": "global",
    "main": "dist/js/materialize",
    "defaultExtension": "js"
  },
  'angular2-materialize': {
    "main": "dist/index",
    "defaultExtension": "js",
  }
}

Angular 2 实现 CSS 侧导航未显示

Angular 2 Materialize CSS Side-Nav Not Showing

node.js

materialize

angular-material

angular