2017-11-24 6 views
0

私はBootstrapの最新バージョンをインストールしている:ナビゲーションバーのdoesntの仕事:4.0.0-beta.2

"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5", 
"bootstrap": "^4.0.0-beta.2", 
"core-js": "^2.4.1", 
"jquery": "^3.2.1", 
"popper.js": "^1.12.9", 

をそして私はnavbarを実装:

buttonに変身する必要があり
<nav class="navbar navbar-expand-md navbar-light bg-light" *ngIf="!isLogged"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 

    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    <ul class="navbar-nav mr-auto"> 
     <li class="nav-item active" routerLinkActive="active current"> 
     <a class="nav-link" routerLink="/sign-up"><span class="">Sign Up</span></a> 
     </li> 
     <li class="nav-item active" routerLinkActive="active current"> 
     <a class="nav-link" routerLink="/login"><span class="">Login</span></a> 
     </li> 
    </ul> 
    </div> 
</nav> 

いつモバイルサイズに来る。実際には、buttonは何のクリックに対しても反応しません。どうして?誰か手掛かりがありますか?私はangular.cliにスクリプトを追加しませんでした。

UPDATE: project structure

"dependencies": { 
    "@angular/animations": "^4.0.0", 
    "@angular/common": "^4.0.0", 
    "@angular/compiler": "^4.0.0", 
    "@angular/core": "^4.0.0", 
    "@angular/forms": "^4.0.0", 
    "@angular/http": "^4.0.0", 
    "@angular/platform-browser": "^4.0.0", 
    "@angular/platform-browser-dynamic": "^4.0.0", 
    "@angular/router": "^4.0.0", 
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5", 
    "bootstrap": "^4.0.0-beta.2", 
    "core-js": "^2.4.1", 
    "jquery": "^3.2.1", 
    "popper.js": "^1.12.9", 
    "rxjs": "^5.4.1", 
    "zone.js": "^0.8.14" 
    }, 
+0

を持つべきものだあなたは、エラーのためにあなたのコンソールを確認しましたか? – vanburen

+0

実際にはエラーはありません –

+0

_私はangular.cli_にスクリプトを追加しませんでした。 JSの依存関係を提供していないと言っていますか?**折りたたみ**の機能はそれらのJSの依存関係とは機能しません。この質問は、https://stackoverflow.com/questions/45552429/navbar-not-rendering-in-browser-using-ng-bootstrap-angular-4に役立ちます。 – vanburen

答えて

0

は、ここでは、あなたの.angular-cli.jsonに

"scripts": [ 
    "../node_modules/jquery/dist/jquery.slim.min.js", 
    "../node_modules/popper.js/dist/umd/popper.min.js", 
    "../node_modules/bootstrap/dist/js/bootstrap.min.js" 
    ], 
"styles": [ 
    "styles.css", 
    "../node_modules/bootstrap/dist/css/bootstrap.css" 
    ] 
関連する問題