0
私はマテリアライズCSSでAngular 2を使用しています。私が抱えている問題は、サイドナビのハンバーガーが表示されている場所にページを縮小するときです。ハンバーガーをクリックしてサイドナビゲーターがポップアップしないと、画面が大きく暗くなります。それはすべきであるように決してスライドアウトしません。角度2 Materialize CSS Side-Navが表示されない
私のコンポーネントは、これは私のindex.htmlページで
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();
}
}
を下回っています。私は、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"
},
サイドナビゲーターをスライドさせるにはどうすればよいですか？
関連スタックオーバーフローの問題が、私は私のコンポーネント、サイド-NAVショーにこのスタイルタグを追加した後、角度2を使用していますので、私の問題を解決していませんが、私はそれをオフクリックできませんし、画面は暗いままです。 materialize css: Always show side-nav even on mobile?
コードペン - それは角度2の問題を考え出し https://codepen.io/abramjstamper/pen/BQLaQY